diff --git a/alacarte-novel-website/chapters/chapter-10.html b/alacarte-novel-website/chapters/chapter-10.html
index 9006eda..805a557 100644
--- a/alacarte-novel-website/chapters/chapter-10.html
+++ b/alacarte-novel-website/chapters/chapter-10.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>暗黑雷鸣废墟 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 10</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>暗黑雷鸣废墟 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 10</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>暗黑雷鸣废墟，位于格兰之森最阴森的角落。</p>
 <p>这里曾是古代战场，无数战士在此殒命。死亡的气息终年不散，久而久之，死者化作僵尸，在废墟中游荡。</p>
 <p>"这里就是……暗黑雷鸣废墟？"赛丽亚紧紧抓住林克的衣角，声音有些发颤。</p>
@@ -598,56 +597,62 @@
 <p>"从今以后，你就叫'晨曦'吧。"林克轻声说。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第十章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-9.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-11.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-9.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-11.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-1.html" class="sidebar-chapter ">第1章：洛兰的风</a>
 <a href="chapter-2.html" class="sidebar-chapter ">第2章：洛兰深处</a>
 <a href="chapter-3.html" class="sidebar-chapter ">第3章：幽暗密林</a>
@@ -688,190 +693,211 @@
 <a href="chapter-38.html" class="sidebar-chapter ">第38章：熔岩穴·泰坦之怒</a>
 <a href="chapter-39.html" class="sidebar-chapter ">第39章：暗黑城入口·无头骑士</a>
 <a href="chapter-40.html" class="sidebar-chapter ">第40章：万年雪山·冰心少年</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(10)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(10)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-100.html b/alacarte-novel-website/chapters/chapter-100.html
index 1970230..3ae59a3 100644
--- a/alacarte-novel-website/chapters/chapter-100.html
+++ b/alacarte-novel-website/chapters/chapter-100.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>王之书库 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 100</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>王之书库 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 100</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>寂静城，核心实验室。</p>
 <p>古老能量核心在永恒之火的驱动下稳定运转，散发出柔和而强大的光芒。卢克坐在核心旁边，感受着体内久违的平静，脸上露出了久违的笑容。</p>
 <p>「多少年了...」他轻声感叹，「我终于可以安心地睡一觉了...」</p>
@@ -611,56 +610,62 @@
 <p>「谢谢你，年轻人。海伯伦星的王，再一次感谢你的帮助。」</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第九十八章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-99.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-101.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-99.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-101.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-70.html" class="sidebar-chapter ">第70章：天界之门·根特外围的战火</a>
 <a href="chapter-71.html" class="sidebar-chapter ">第71章：根特北门·泽丁的誓言</a>
 <a href="chapter-72.html" class="sidebar-chapter ">第72章：根特南门·马琳的效忠</a>
@@ -722,190 +727,211 @@
 <a href="chapter-128.html" class="sidebar-chapter ">第128章：番外·与艾泽拉的守护誓言</a>
 <a href="chapter-129.html" class="sidebar-chapter ">第129章：魔界的召唤</a>
 <a href="chapter-130.html" class="sidebar-chapter ">第130章：魔界营地</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(100)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(100)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-101.html b/alacarte-novel-website/chapters/chapter-101.html
index 64444d4..e934df5 100644
--- a/alacarte-novel-website/chapters/chapter-101.html
+++ b/alacarte-novel-website/chapters/chapter-101.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>不灭回廊 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 101</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>不灭回廊 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 101</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>寂静城，核心实验室。</p>
 <p>古老能量核心稳定运转，卢克的身体状况逐渐好转。但林克知道，他们还没有脱离危险——赫尔德的阴谋仍在继续，而通往王座的道路还横亘着最后一道关卡。</p>
 <p>「不灭回廊...」卢克缓缓说道，「那是通往王座的必经之路，也是寂静城最危险的区域。」</p>
@@ -659,56 +658,62 @@
 <p>保护所有爱他的人，保护这个他们共同守护的世界。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第九十九章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-100.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-102.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-100.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-102.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-71.html" class="sidebar-chapter ">第71章：根特北门·泽丁的誓言</a>
 <a href="chapter-72.html" class="sidebar-chapter ">第72章：根特南门·马琳的效忠</a>
 <a href="chapter-73.html" class="sidebar-chapter ">第73章：根特防御战·钢铁与血肉的碰撞</a>
@@ -770,190 +775,211 @@
 <a href="chapter-129.html" class="sidebar-chapter ">第129章：魔界的召唤</a>
 <a href="chapter-130.html" class="sidebar-chapter ">第130章：魔界营地</a>
 <a href="chapter-131.html" class="sidebar-chapter ">第131章：凯蒂的指引</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(101)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(101)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-102.html b/alacarte-novel-website/chapters/chapter-102.html
index 1744b16..21d1f5c 100644
--- a/alacarte-novel-website/chapters/chapter-102.html
+++ b/alacarte-novel-website/chapters/chapter-102.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>机械王座 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 102</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>机械王座 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 102</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>寂静城，机械王座。</p>
 <p>这里是寂静城的最深处，也是海伯伦星王权的象征。巨大的金属穹顶高耸入云，无数齿轮在头顶缓缓转动，发出庄严而沉重的声响。中央是一座由纯金与水晶构成的王座，散发着柔和而威严的光芒。</p>
 <p>林克站在王座前，身边是贝奇、艾泽拉、米娅和皇女艾丽婕。经过连番战斗，他们终于抵达了这里。</p>
@@ -619,56 +618,62 @@
 <p>是的，这就是他想要的——守护所爱之人，守护这个美好的世界。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百零二章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-101.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-103.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-101.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-103.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-72.html" class="sidebar-chapter ">第72章：根特南门·马琳的效忠</a>
 <a href="chapter-73.html" class="sidebar-chapter ">第73章：根特防御战·钢铁与血肉的碰撞</a>
 <a href="chapter-74.html" class="sidebar-chapter ">第74章：夜间袭击战·银勺杂技团的覆灭</a>
@@ -730,190 +735,211 @@
 <a href="chapter-130.html" class="sidebar-chapter ">第130章：魔界营地</a>
 <a href="chapter-131.html" class="sidebar-chapter ">第131章：凯蒂的指引</a>
 <a href="chapter-132.html" class="sidebar-chapter ">第132章：营地危机</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(102)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(102)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-103.html b/alacarte-novel-website/chapters/chapter-103.html
index 840c5d4..edf3672 100644
--- a/alacarte-novel-website/chapters/chapter-103.html
+++ b/alacarte-novel-website/chapters/chapter-103.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>番外·寂静城的早晨 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 103</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>番外·寂静城的早晨 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 103</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>寂静城，核心实验室。</p>
 <p>清晨的第一缕阳光透过水晶穹顶洒入，在地板上投下斑驳的光影。古老能量核心散发着柔和的蓝金色光芒，如同一颗温暖的心脏，静静地跳动着。</p>
 <p>林克睁开眼睛，发现自己躺在一张柔软的大床上。这是卢克特意为他准备的房间，位于寂静城的核心区域，可以俯瞰整个克洛诺斯岛。</p>
@@ -624,56 +623,62 @@
 <p>保护这个他深爱的家庭，保护这个他们共同守护的世界。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百零三章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-102.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-104.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-102.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-104.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-73.html" class="sidebar-chapter ">第73章：根特防御战·钢铁与血肉的碰撞</a>
 <a href="chapter-74.html" class="sidebar-chapter ">第74章：夜间袭击战·银勺杂技团的覆灭</a>
 <a href="chapter-75.html" class="sidebar-chapter ">第75章：补给线阻断战·UM-0终结者</a>
@@ -735,190 +740,211 @@
 <a href="chapter-131.html" class="sidebar-chapter ">第131章：凯蒂的指引</a>
 <a href="chapter-132.html" class="sidebar-chapter ">第132章：营地危机</a>
 <a href="chapter-133.html" class="sidebar-chapter ">第133章：尼梅尔的心意</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(103)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(103)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-104.html b/alacarte-novel-website/chapters/chapter-104.html
index 7743dfa..1c6cd7f 100644
--- a/alacarte-novel-website/chapters/chapter-104.html
+++ b/alacarte-novel-website/chapters/chapter-104.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>番外·贝奇与艾泽拉 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 104</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>番外·贝奇与艾泽拉 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 104</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>寂静城，午后。</p>
 <p>林克和卢克在研究古老能量核心的维护问题，米娅和皇女回天界处理政务。寂静城中，只剩下贝奇和艾泽拉两个女人。</p>
 <p>「艾泽拉姐姐...」贝奇拉着艾泽拉的手，眼中满是期待，「我们去花园玩吧！」</p>
@@ -604,56 +603,62 @@
 <p>三人站在花园中，望着天边的夕阳，心中充满了对未来的期待。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（番外一百零二章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-103.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-105.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-103.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-105.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-74.html" class="sidebar-chapter ">第74章：夜间袭击战·银勺杂技团的覆灭</a>
 <a href="chapter-75.html" class="sidebar-chapter ">第75章：补给线阻断战·UM-0终结者</a>
 <a href="chapter-76.html" class="sidebar-chapter ">第76章：追击歼灭战·机械吉赛尔的末路</a>
@@ -715,190 +720,211 @@
 <a href="chapter-132.html" class="sidebar-chapter ">第132章：营地危机</a>
 <a href="chapter-133.html" class="sidebar-chapter ">第133章：尼梅尔的心意</a>
 <a href="chapter-134.html" class="sidebar-chapter ">第134章：中央公园</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(104)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(104)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-105.html b/alacarte-novel-website/chapters/chapter-105.html
index 362bf2d..d79b431 100644
--- a/alacarte-novel-website/chapters/chapter-105.html
+++ b/alacarte-novel-website/chapters/chapter-105.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>番外·卢克的嘱托 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 105</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>番外·卢克的嘱托 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 105</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>寂静城，黄昏。</p>
 <p>林克被卢克叫到核心实验室。老人坐在能量核心旁边，浑浊的眼睛望着跳动的光芒，脸上带着复杂的神色。</p>
 <p>「卢克爷爷，您找我？」林克走到他身边坐下。</p>
@@ -588,56 +587,62 @@
 <p>在夕阳的光芒中，两人相拥而吻，仿佛时间都静止了。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（番外一百零三章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-104.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-106.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-104.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-106.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-75.html" class="sidebar-chapter ">第75章：补给线阻断战·UM-0终结者</a>
 <a href="chapter-76.html" class="sidebar-chapter ">第76章：追击歼灭战·机械吉赛尔的末路</a>
 <a href="chapter-77.html" class="sidebar-chapter ">第77章：海上列车·鲁夫特悬空海港</a>
@@ -699,190 +704,211 @@
 <a href="chapter-133.html" class="sidebar-chapter ">第133章：尼梅尔的心意</a>
 <a href="chapter-134.html" class="sidebar-chapter ">第134章：中央公园</a>
 <a href="chapter-135.html" class="sidebar-chapter ">第135章：剑圣的试炼</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(105)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(105)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-106.html b/alacarte-novel-website/chapters/chapter-106.html
index fe3d509..a957b6c 100644
--- a/alacarte-novel-website/chapters/chapter-106.html
+++ b/alacarte-novel-website/chapters/chapter-106.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>时空之门的召唤 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 106</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>时空之门的召唤 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 106</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>寂静城，王之书库。</p>
 <p>林克站在巨大的水晶控制台前，眉头紧锁。屏幕上显示着密密麻麻的数据，那是关于时空之门的古老记录。</p>
 <p>「时空之门...真的存在吗？」贝奇站在他身边，眼中满是好奇。</p>
@@ -583,56 +582,62 @@
 <p>「这一次，我一定要改变你的命运。」</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百零四章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-105.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-107.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-105.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-107.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-76.html" class="sidebar-chapter ">第76章：追击歼灭战·机械吉赛尔的末路</a>
 <a href="chapter-77.html" class="sidebar-chapter ">第77章：海上列车·鲁夫特悬空海港</a>
 <a href="chapter-78.html" class="sidebar-chapter ">第78章：列车上的海贼·铁鳞团的覆灭</a>
@@ -694,190 +699,211 @@
 <a href="chapter-134.html" class="sidebar-chapter ">第134章：中央公园</a>
 <a href="chapter-135.html" class="sidebar-chapter ">第135章：剑圣的试炼</a>
 <a href="chapter-136.html" class="sidebar-chapter ">第136章：地轨中心</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(106)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(106)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-107.5.html b/alacarte-novel-website/chapters/chapter-107.5.html
index a64265e..6e7f1d2 100644
--- a/alacarte-novel-website/chapters/chapter-107.5.html
+++ b/alacarte-novel-website/chapters/chapter-107.5.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>时空回响·赛丽亚的记忆 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 107.5</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>时空回响·赛丽亚的记忆 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 107.5</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>金色的光芒散去，林克回到了现代。</p>
 <p>他睁开眼睛，发现自己站在艾尔文防线的入口。熟悉的阳光、熟悉的空气、熟悉的一切...但他心中却充满了复杂的情绪。</p>
 <p>500年前的那一幕还在他脑海中回荡——那个惊恐的金发少女，那个让他心痛的眼神，那句"我们...还会再见面吗？"</p>
@@ -597,241 +596,268 @@
 <p>命中注定的缘分，终于在这一刻圆满。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百零七点五章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-106.5.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-108.5.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-106.5.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-108.5.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-107.5.html" class="sidebar-chapter current">第107.5章：时空回响·赛丽亚的记忆</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(107.5)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(107.5)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-107.html b/alacarte-novel-website/chapters/chapter-107.html
index 2e83e0e..ad7d2b7 100644
--- a/alacarte-novel-website/chapters/chapter-107.html
+++ b/alacarte-novel-website/chapters/chapter-107.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>格兰之火 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 107</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>格兰之火 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 107</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>格兰之森，500年前。</p>
 <p>金色的光芒在森林深处闪烁，空间如同水波般扭曲。一道身影从光芒中走出，踏在了这片古老的大地上。</p>
 <p>林克睁开眼睛，映入眼帘的是一片郁郁葱葱的森林。高大的树木遮天蔽日，阳光透过树叶的缝隙洒下斑驳的光影。空气中弥漫着草木的清香，还有一丝若有若无的烟火气息。</p>
@@ -650,56 +649,62 @@
 <p>时空之门，即将关闭。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百零五章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-106.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-108.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-106.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-108.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-77.html" class="sidebar-chapter ">第77章：海上列车·鲁夫特悬空海港</a>
 <a href="chapter-78.html" class="sidebar-chapter ">第78章：列车上的海贼·铁鳞团的覆灭</a>
 <a href="chapter-79.html" class="sidebar-chapter ">第79章：夺回西部线·卡勒特的余孽</a>
@@ -761,190 +766,211 @@
 <a href="chapter-135.html" class="sidebar-chapter ">第135章：剑圣的试炼</a>
 <a href="chapter-136.html" class="sidebar-chapter ">第136章：地轨中心</a>
 <a href="chapter-137.html" class="sidebar-chapter ">第137章：魔剑士阿斯兰</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(107)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(107)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-108.html b/alacarte-novel-website/chapters/chapter-108.html
index 67b9140..ddf02bd 100644
--- a/alacarte-novel-website/chapters/chapter-108.html
+++ b/alacarte-novel-website/chapters/chapter-108.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>瘟疫之源 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 108</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>瘟疫之源 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 108</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>三天后，林克再次来到时空之门前。</p>
 <p>这三天里，他和赛丽亚度过了难得的宁静时光。他们一起看日出日落，一起在艾尔文防线的街道上散步，一起回忆500年前的那场相遇。</p>
 <p>但林克知道，他不能一直停留在这里。赫尔德的阴谋还在继续，时空之门中还有更多的真相等待揭开。</p>
@@ -649,56 +648,62 @@
 <p>"诺伊佩拉...我会记住这个地方。"</p>
 <p>他踏入金色的光芒，前往下一个时间点。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百零八章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-107.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-109.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-107.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-109.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-78.html" class="sidebar-chapter ">第78章：列车上的海贼·铁鳞团的覆灭</a>
 <a href="chapter-79.html" class="sidebar-chapter ">第79章：夺回西部线·卡勒特的余孽</a>
 <a href="chapter-80.html" class="sidebar-chapter ">第80章：雾都赫伊斯·无法地带的阴影</a>
@@ -760,190 +765,211 @@
 <a href="chapter-136.html" class="sidebar-chapter ">第136章：地轨中心</a>
 <a href="chapter-137.html" class="sidebar-chapter ">第137章：魔剑士阿斯兰</a>
 <a href="chapter-138.html" class="sidebar-chapter ">第138章：泪目之眼</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(108)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(108)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-109.html b/alacarte-novel-website/chapters/chapter-109.html
index 1886e72..e88d41d 100644
--- a/alacarte-novel-website/chapters/chapter-109.html
+++ b/alacarte-novel-website/chapters/chapter-109.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>卡勒特之初 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 109</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>卡勒特之初 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 109</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>金色的光芒散去，林克感到双脚踩在滚烫的沙地上。</p>
 <p>他睁开眼睛，映入眼帘的是一片荒凉的沙漠——无边无际的黄沙延伸至天际，烈日高悬，空气中弥漫着燥热的气息。远处，几座破旧的建筑孤零零地矗立着，像是被世界遗忘的角落。</p>
 <p>"这就是...无法地带？"</p>
@@ -638,56 +637,62 @@
 <p>他转身离开工厂，朝着时空之门的方向走去。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百零七章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-108.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-110.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-108.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-110.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-79.html" class="sidebar-chapter ">第79章：夺回西部线·卡勒特的余孽</a>
 <a href="chapter-80.html" class="sidebar-chapter ">第80章：雾都赫伊斯·无法地带的阴影</a>
 <a href="chapter-81.html" class="sidebar-chapter ">第81章：阿登高地·GT-9600</a>
@@ -749,190 +754,211 @@
 <a href="chapter-137.html" class="sidebar-chapter ">第137章：魔剑士阿斯兰</a>
 <a href="chapter-138.html" class="sidebar-chapter ">第138章：泪目之眼</a>
 <a href="chapter-139.html" class="sidebar-chapter ">第139章：使徒会晤</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(109)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(109)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-11.html b/alacarte-novel-website/chapters/chapter-11.html
index 5c3324d..bdcc143 100644
--- a/alacarte-novel-website/chapters/chapter-11.html
+++ b/alacarte-novel-website/chapters/chapter-11.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>剑魂转职仪式 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 11</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>剑魂转职仪式 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 11</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>暗黑雷鸣废墟的试炼结束后，林克和赛丽亚跟随GSD回到了赫顿玛尔。</p>
 <p>剑道馆内，GSD站在大厅中央，表情庄严。林克单膝跪在他面前，手中捧着那把刚刚获得的光剑"晨曦"。</p>
 <p>"林克，你已通过暗黑雷鸣废墟的试炼，证明了你的意志和剑术。"GSD的声音低沉而有力，"今日，我正式授予你剑魂之名。"</p>
@@ -591,56 +590,62 @@
 <p>"而且……"GSD顿了顿，"她可能会告诉你关于晨曦的秘密。"</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第十一章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-10.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-12.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-10.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-12.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-1.html" class="sidebar-chapter ">第1章：洛兰的风</a>
 <a href="chapter-2.html" class="sidebar-chapter ">第2章：洛兰深处</a>
 <a href="chapter-3.html" class="sidebar-chapter ">第3章：幽暗密林</a>
@@ -682,190 +687,211 @@
 <a href="chapter-39.html" class="sidebar-chapter ">第39章：暗黑城入口·无头骑士</a>
 <a href="chapter-40.html" class="sidebar-chapter ">第40章：万年雪山·冰心少年</a>
 <a href="chapter-41.html" class="sidebar-chapter ">第41章：敏泰的加入</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(11)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(11)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-110.html b/alacarte-novel-website/chapters/chapter-110.html
index fc4a96c..4363be4 100644
--- a/alacarte-novel-website/chapters/chapter-110.html
+++ b/alacarte-novel-website/chapters/chapter-110.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>无法地带 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 110</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>无法地带 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 110</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>金色的光芒散去，林克感到一股燥热的气息扑面而来。</p>
 <p>他睁开眼睛，发现自己站在一片更加荒凉的沙漠中。这里的温度比卡勒特之初更高，空气中弥漫着硝烟和血腥的味道。远处，枪声和爆炸声此起彼伏，仿佛永不停歇的战争。</p>
 <p>"这就是...无法地带的核心？"</p>
@@ -600,56 +599,62 @@
 <p>他转身走向时空之门的方向，准备前往下一个时间点。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百零八章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-109.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-111.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-109.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-111.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-80.html" class="sidebar-chapter ">第80章：雾都赫伊斯·无法地带的阴影</a>
 <a href="chapter-81.html" class="sidebar-chapter ">第81章：阿登高地·GT-9600</a>
 <a href="chapter-82.html" class="sidebar-chapter ">第82章：卡勒特指挥部·兰蒂卢斯</a>
@@ -711,190 +716,211 @@
 <a href="chapter-138.html" class="sidebar-chapter ">第138章：泪目之眼</a>
 <a href="chapter-139.html" class="sidebar-chapter ">第139章：使徒会晤</a>
 <a href="chapter-140.html" class="sidebar-chapter ">第140章：复仇之剑</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(110)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(110)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-111.html b/alacarte-novel-website/chapters/chapter-111.html
index aeadda8..48761fd 100644
--- a/alacarte-novel-website/chapters/chapter-111.html
+++ b/alacarte-novel-website/chapters/chapter-111.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>暗黑圣战 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 111</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>暗黑圣战 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 111</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>金色的光芒散去，林克感到一股阴冷而神圣的气息扑面而来。</p>
 <p>他睁开眼睛，发现自己站在一座宏伟的教堂前。这座教堂通体漆黑，散发着诡异而庄严的气息。教堂周围，无数的圣职者正在与恶魔激战，喊杀声和祈祷声交织在一起。</p>
 <p>"这就是...暗黑圣战？"</p>
@@ -598,56 +597,62 @@
 <p>时空之门，即将带他前往下一个时间点。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百一十一章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-110.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-112.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-110.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-112.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-81.html" class="sidebar-chapter ">第81章：阿登高地·GT-9600</a>
 <a href="chapter-82.html" class="sidebar-chapter ">第82章：卡勒特指挥部·兰蒂卢斯</a>
 <a href="chapter-83.html" class="sidebar-chapter ">第83章：皇女的告白·天界的新篇章</a>
@@ -709,190 +714,211 @@
 <a href="chapter-139.html" class="sidebar-chapter ">第139章：使徒会晤</a>
 <a href="chapter-140.html" class="sidebar-chapter ">第140章：复仇之剑</a>
 <a href="chapter-141.html" class="sidebar-chapter ">第141章：寂静城再访</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(111)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(111)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-112.html b/alacarte-novel-website/chapters/chapter-112.html
index 310ba59..9270cf8 100644
--- a/alacarte-novel-website/chapters/chapter-112.html
+++ b/alacarte-novel-website/chapters/chapter-112.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>昔日悲鸣 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 112</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>昔日悲鸣 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 112</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>金色的光芒散去，林克感到一股阴冷的气息扑面而来。</p>
 <p>他睁开眼睛，发现自己站在一个黑暗的洞穴入口。洞穴深处传来凄厉的哀嚎声，仿佛有无数冤魂在哭泣。</p>
 <p>"这就是...悲鸣洞穴？"</p>
@@ -597,56 +596,62 @@
 <p>他踏入金色的光芒，前往下一个时间点。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百一十二章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-111.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-113.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-111.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-113.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-82.html" class="sidebar-chapter ">第82章：卡勒特指挥部·兰蒂卢斯</a>
 <a href="chapter-83.html" class="sidebar-chapter ">第83章：皇女的告白·天界的新篇章</a>
 <a href="chapter-84.html" class="sidebar-chapter ">第84章：幽灵列车·亡者的低语</a>
@@ -708,190 +713,211 @@
 <a href="chapter-140.html" class="sidebar-chapter ">第140章：复仇之剑</a>
 <a href="chapter-141.html" class="sidebar-chapter ">第141章：寂静城再访</a>
 <a href="chapter-142.html" class="sidebar-chapter ">第142章：时间之钥</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(112)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(112)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-113.html b/alacarte-novel-website/chapters/chapter-113.html
index e0ced0b..c248dbb 100644
--- a/alacarte-novel-website/chapters/chapter-113.html
+++ b/alacarte-novel-website/chapters/chapter-113.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>凛冬 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 113</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>凛冬 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 113</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>金色的光芒散去，林克感到一股刺骨的寒意。</p>
 <p>他睁开眼睛，发现自己站在一片冰雪覆盖的土地上。远处，高耸的城堡在风雪中若隐若现，天空中飞舞着巨大的龙影。</p>
 <p>"这就是...500年前的天界？"</p>
@@ -612,56 +611,62 @@
 <p>他走向时空之门，准备前往最后一个时间点。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百一十三章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-112.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-114.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-112.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-114.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-83.html" class="sidebar-chapter ">第83章：皇女的告白·天界的新篇章</a>
 <a href="chapter-84.html" class="sidebar-chapter ">第84章：幽灵列车·亡者的低语</a>
 <a href="chapter-85.html" class="sidebar-chapter ">第85章：伊顿工业区·克雷发电站</a>
@@ -723,190 +728,211 @@
 <a href="chapter-141.html" class="sidebar-chapter ">第141章：寂静城再访</a>
 <a href="chapter-142.html" class="sidebar-chapter ">第142章：时间之钥</a>
 <a href="chapter-143.html" class="sidebar-chapter ">第143章：翡翠梦魇</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(113)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(113)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-114.html b/alacarte-novel-website/chapters/chapter-114.html
index 71e69fc..5aa8cc5 100644
--- a/alacarte-novel-website/chapters/chapter-114.html
+++ b/alacarte-novel-website/chapters/chapter-114.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>迷之觉悟 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 114</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>迷之觉悟 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 114</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>金色的光芒散去，林克回到了现代。</p>
 <p>他睁开眼睛，发现自己站在虚祖的时空之门前。西岚正站在那里，神情凝重。</p>
 <p>"你终于回来了。"西岚说道，"我等你很久了。"</p>
@@ -603,56 +602,62 @@
 <p>"走吧。"林克看向前方，"下一个冒险，在等着我们。"</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百一十四章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-113.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-115.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-113.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-115.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-84.html" class="sidebar-chapter ">第84章：幽灵列车·亡者的低语</a>
 <a href="chapter-85.html" class="sidebar-chapter ">第85章：伊顿工业区·克雷发电站</a>
 <a href="chapter-86.html" class="sidebar-chapter ">第86章：普鲁兹发电站·闪电之帕特里斯</a>
@@ -714,190 +719,211 @@
 <a href="chapter-142.html" class="sidebar-chapter ">第142章：时间之钥</a>
 <a href="chapter-143.html" class="sidebar-chapter ">第143章：翡翠梦魇</a>
 <a href="chapter-144.html" class="sidebar-chapter ">第144章：诅咒的守护者</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(114)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(114)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-115.html b/alacarte-novel-website/chapters/chapter-115.html
index eb86501..39018c3 100644
--- a/alacarte-novel-website/chapters/chapter-115.html
+++ b/alacarte-novel-website/chapters/chapter-115.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>番外·艾丽丝的抉择 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 115</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>番外·艾丽丝的抉择 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 115</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>迷之觉悟的战斗结束后，艾丽丝陷入了昏迷。</p>
 <p>林克将她带回虚祖的住所，日夜守护。三天后，她终于醒来。</p>
 <p>"这是...哪里？"艾丽丝睁开眼睛，看到陌生的天花板。</p>
@@ -612,56 +611,62 @@
 <p>"我等你...艾丽丝..."</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（番外一百一十五章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-114.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-116.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-114.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-116.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-85.html" class="sidebar-chapter ">第85章：伊顿工业区·克雷发电站</a>
 <a href="chapter-86.html" class="sidebar-chapter ">第86章：普鲁兹发电站·闪电之帕特里斯</a>
 <a href="chapter-87.html" class="sidebar-chapter ">第87章：特伦斯发电站·熔岩之萨姆</a>
@@ -723,190 +728,211 @@
 <a href="chapter-143.html" class="sidebar-chapter ">第143章：翡翠梦魇</a>
 <a href="chapter-144.html" class="sidebar-chapter ">第144章：诅咒的守护者</a>
 <a href="chapter-145.html" class="sidebar-chapter ">第145章：精灵的誓言</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(115)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(115)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-116.html b/alacarte-novel-website/chapters/chapter-116.html
index c31630e..7043535 100644
--- a/alacarte-novel-website/chapters/chapter-116.html
+++ b/alacarte-novel-website/chapters/chapter-116.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>番外·后宫的日常 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 116</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>番外·后宫的日常 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 116</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>清晨的阳光透过窗帘洒进房间，林克迷迷糊糊地睁开眼睛。</p>
 <p>还没等他完全清醒，一个柔软的身躯就钻进了他的被窝。</p>
 <p>"林克哥哥，起床啦！"敏泰的声音在耳边响起，带着少女特有的活力。</p>
@@ -669,56 +668,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百一十六章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（番外·后宫日常 完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-115.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-117.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-115.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-117.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-86.html" class="sidebar-chapter ">第86章：普鲁兹发电站·闪电之帕特里斯</a>
 <a href="chapter-87.html" class="sidebar-chapter ">第87章：特伦斯发电站·熔岩之萨姆</a>
 <a href="chapter-88.html" class="sidebar-chapter ">第88章：格兰迪发电站·虚空之弗曼</a>
@@ -780,190 +785,211 @@
 <a href="chapter-144.html" class="sidebar-chapter ">第144章：诅咒的守护者</a>
 <a href="chapter-145.html" class="sidebar-chapter ">第145章：精灵的誓言</a>
 <a href="chapter-146.html" class="sidebar-chapter ">第146章：深渊之眼</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(116)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(116)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-117.html b/alacarte-novel-website/chapters/chapter-117.html
index 1bf59c6..66817df 100644
--- a/alacarte-novel-website/chapters/chapter-117.html
+++ b/alacarte-novel-website/chapters/chapter-117.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>番外·与赛丽亚的约会 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 117</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>番外·与赛丽亚的约会 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 117</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>第二天清晨，林克早早地起床。</p>
 <p>今天，他有一个特别的计划。</p>
 <p>"赛丽亚，今天有空吗？"他走到正在厨房忙碌的少女身边。</p>
@@ -673,56 +672,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百一十七章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（番外·赛丽亚篇 完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-116.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-118.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-116.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-118.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-87.html" class="sidebar-chapter ">第87章：特伦斯发电站·熔岩之萨姆</a>
 <a href="chapter-88.html" class="sidebar-chapter ">第88章：格兰迪发电站·虚空之弗曼</a>
 <a href="chapter-89.html" class="sidebar-chapter ">第89章：安图恩攻坚战·黑雾之源</a>
@@ -784,190 +789,211 @@
 <a href="chapter-145.html" class="sidebar-chapter ">第145章：精灵的誓言</a>
 <a href="chapter-146.html" class="sidebar-chapter ">第146章：深渊之眼</a>
 <a href="chapter-147.html" class="sidebar-chapter ">第147章：赫尔德的仪式</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(117)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(117)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-118.html b/alacarte-novel-website/chapters/chapter-118.html
index 52bf479..c51f2d2 100644
--- a/alacarte-novel-website/chapters/chapter-118.html
+++ b/alacarte-novel-website/chapters/chapter-118.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>番外·与奥菲利亚的重逢 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 118</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>番外·与奥菲利亚的重逢 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 118</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>清晨，林克找到了奥菲利亚。</p>
 <p>她正站在旅馆的阳台上，金色的长发在晨风中飘动，望着远方的天际线出神。</p>
 <p>"在想什么？"林克走到她身边。</p>
@@ -639,56 +638,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百一十八章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（番外·奥菲利亚篇 完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-117.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-119.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-117.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-119.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-88.html" class="sidebar-chapter ">第88章：格兰迪发电站·虚空之弗曼</a>
 <a href="chapter-89.html" class="sidebar-chapter ">第89章：安图恩攻坚战·黑雾之源</a>
 <a href="chapter-90.html" class="sidebar-chapter ">第90章：安图恩攻坚战·震颤的大地</a>
@@ -750,190 +755,211 @@
 <a href="chapter-146.html" class="sidebar-chapter ">第146章：深渊之眼</a>
 <a href="chapter-147.html" class="sidebar-chapter ">第147章：赫尔德的仪式</a>
 <a href="chapter-148.html" class="sidebar-chapter ">第148章：战后余晖</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(118)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(118)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-119.html b/alacarte-novel-website/chapters/chapter-119.html
index 88e16a7..2246c2e 100644
--- a/alacarte-novel-website/chapters/chapter-119.html
+++ b/alacarte-novel-website/chapters/chapter-119.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>番外·与敏泰的雪山之行 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 119</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>番外·与敏泰的雪山之行 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 119</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>三天后，林克踏上了前往雪山的旅程。</p>
 <p>这一次，他要去看望敏泰。</p>
 <p>那座熟悉的雪山营地在风雪中若隐若现，林克加快脚步，心中满是期待。</p>
@@ -636,56 +635,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百一十九章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（番外·敏泰篇 完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-118.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-120.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-118.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-120.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-89.html" class="sidebar-chapter ">第89章：安图恩攻坚战·黑雾之源</a>
 <a href="chapter-90.html" class="sidebar-chapter ">第90章：安图恩攻坚战·震颤的大地</a>
 <a href="chapter-91.html" class="sidebar-chapter ">第91章：安图恩攻坚战·擎天之柱</a>
@@ -747,190 +752,211 @@
 <a href="chapter-147.html" class="sidebar-chapter ">第147章：赫尔德的仪式</a>
 <a href="chapter-148.html" class="sidebar-chapter ">第148章：战后余晖</a>
 <a href="chapter-149.html" class="sidebar-chapter ">第149章：泰波尔斯的召唤</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(119)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(119)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-12.html b/alacarte-novel-website/chapters/chapter-12.html
index 30a4572..843c6a9 100644
--- a/alacarte-novel-website/chapters/chapter-12.html
+++ b/alacarte-novel-website/chapters/chapter-12.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>西海岸 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 12</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>西海岸 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 12</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>转职仪式结束，林克和赛丽亚在赫顿玛尔休整了两天后，准备前往天空之城。</p>
 <p>按照GSD的指引，他们先来到了西海岸。</p>
 <p>西海岸位于赫顿玛尔的西边，是一座港口城市。与赫顿玛尔的繁华不同，这里充满了海洋的气息。空气中弥漫着咸咸的海风，街道上到处都是渔民和商人。</p>
@@ -601,56 +600,62 @@
 <p>新的冒险，即将开始。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第十二章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-11.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-13.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-11.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-13.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-1.html" class="sidebar-chapter ">第1章：洛兰的风</a>
 <a href="chapter-2.html" class="sidebar-chapter ">第2章：洛兰深处</a>
 <a href="chapter-3.html" class="sidebar-chapter ">第3章：幽暗密林</a>
@@ -693,190 +698,211 @@
 <a href="chapter-40.html" class="sidebar-chapter ">第40章：万年雪山·冰心少年</a>
 <a href="chapter-41.html" class="sidebar-chapter ">第41章：敏泰的加入</a>
 <a href="chapter-42.html" class="sidebar-chapter ">第42章：山脊·野兽师</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(12)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(12)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-120.html b/alacarte-novel-website/chapters/chapter-120.html
index 37d0be9..2d9e48a 100644
--- a/alacarte-novel-website/chapters/chapter-120.html
+++ b/alacarte-novel-website/chapters/chapter-120.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>番外·与莎兰的魔法时光 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 120</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>番外·与莎兰的魔法时光 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 120</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>西海岸的魔法塔，是魔法师公会的所在地。</p>
 <p>林克推开塔门，走进这座充满神秘气息的建筑。塔内弥漫着淡淡的魔法波动，墙上挂满了各种魔法阵和符文。</p>
 <p>"林克？"</p>
@@ -623,56 +622,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百二十章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（番外·莎兰篇 完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-119.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-121.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-119.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-121.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-90.html" class="sidebar-chapter ">第90章：安图恩攻坚战·震颤的大地</a>
 <a href="chapter-91.html" class="sidebar-chapter ">第91章：安图恩攻坚战·擎天之柱</a>
 <a href="chapter-92.html" class="sidebar-chapter ">第92章：安图恩攻坚战·黑色火山</a>
@@ -734,190 +739,211 @@
 <a href="chapter-148.html" class="sidebar-chapter ">第148章：战后余晖</a>
 <a href="chapter-149.html" class="sidebar-chapter ">第149章：泰波尔斯的召唤</a>
 <a href="chapter-150.html" class="sidebar-chapter ">第150章：天空之城</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(120)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(120)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-121.html b/alacarte-novel-website/chapters/chapter-121.html
index 8660c84..80d11fa 100644
--- a/alacarte-novel-website/chapters/chapter-121.html
+++ b/alacarte-novel-website/chapters/chapter-121.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>番外·与帕丽丝的格斗训练 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 121</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>番外·与帕丽丝的格斗训练 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 121</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>诺斯玛尔，曾经的瘟疫之地。</p>
 <p>黄沙漫天，废墟绵延。林克和帕丽丝并肩走在荒废的街道上，脚下的石板已经被岁月侵蚀得坑坑洼洼。周围的建筑大多已经坍塌，只剩下断壁残垣在风中呜咽。</p>
 <p>"好久没回来了。"帕丽丝轻声说，她的声音在空旷的街道上回荡，"这里...曾经是我的家。"</p>
@@ -656,56 +655,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百二十一章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（番外·帕丽丝篇 完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-120.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-122.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-120.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-122.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-91.html" class="sidebar-chapter ">第91章：安图恩攻坚战·擎天之柱</a>
 <a href="chapter-92.html" class="sidebar-chapter ">第92章：安图恩攻坚战·黑色火山</a>
 <a href="chapter-93.html" class="sidebar-chapter ">第93章：安图恩攻坚战·使徒陨落</a>
@@ -767,190 +772,211 @@
 <a href="chapter-149.html" class="sidebar-chapter ">第149章：泰波尔斯的召唤</a>
 <a href="chapter-150.html" class="sidebar-chapter ">第150章：天空之城</a>
 <a href="chapter-151.html" class="sidebar-chapter ">第151章：风暴试炼</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(121)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(121)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-122.html b/alacarte-novel-website/chapters/chapter-122.html
index 35eac0d..c7ef50a 100644
--- a/alacarte-novel-website/chapters/chapter-122.html
+++ b/alacarte-novel-website/chapters/chapter-122.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>番外·与莫纳亨的念动力 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 122</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>番外·与莫纳亨的念动力 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 122</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>绿都格罗兹尼，曾经的念动力者聚居地。</p>
 <p>阳光透过稀疏的云层，洒在这片曾经被诅咒的土地上。林克和莫纳亨并肩走在重建的街道上，周围是新建的房屋和正在生长的绿植。</p>
 <p>空气中弥漫着泥土和青草的芬芳，与过去那股腐朽的气息截然不同。</p>
@@ -658,56 +657,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百二十二章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（番外·莫纳亨篇 完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-121.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-123.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-121.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-123.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-92.html" class="sidebar-chapter ">第92章：安图恩攻坚战·黑色火山</a>
 <a href="chapter-93.html" class="sidebar-chapter ">第93章：安图恩攻坚战·使徒陨落</a>
 <a href="chapter-94.html" class="sidebar-chapter ">第94章：克洛诺斯岛·寂静城的召唤</a>
@@ -769,190 +774,211 @@
 <a href="chapter-150.html" class="sidebar-chapter ">第150章：天空之城</a>
 <a href="chapter-151.html" class="sidebar-chapter ">第151章：风暴试炼</a>
 <a href="chapter-152.html" class="sidebar-chapter ">第152章：光芒与暗影</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(122)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(122)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-123.html b/alacarte-novel-website/chapters/chapter-123.html
index 4d21a84..f9f7469 100644
--- a/alacarte-novel-website/chapters/chapter-123.html
+++ b/alacarte-novel-website/chapters/chapter-123.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>番外·与泽丁的天界巡逻 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 123</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>番外·与泽丁的天界巡逻 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 123</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>天界，皇都根特的城墙上。</p>
 <p>阳光从云层中穿透，洒在这座宏伟的城市上。远处的天空海呈现出淡淡的蓝色，仿佛一幅美丽的画卷。泽丁穿着守备队长的铠甲，站在城墙边缘，望着远处的风景。</p>
 <p>她的身姿挺拔而英武，金色的长发在风中飘动。铠甲上刻着天界的徽章，那是她作为守备队长的荣耀。她的腰间挂着长剑，手里握着巡逻的记录簿。</p>
@@ -673,56 +672,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百二十三章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（番外·泽丁篇 完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-122.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-124.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-122.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-124.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-93.html" class="sidebar-chapter ">第93章：安图恩攻坚战·使徒陨落</a>
 <a href="chapter-94.html" class="sidebar-chapter ">第94章：克洛诺斯岛·寂静城的召唤</a>
 <a href="chapter-95.html" class="sidebar-chapter ">第95章：寂静城的秘密</a>
@@ -784,190 +789,211 @@
 <a href="chapter-151.html" class="sidebar-chapter ">第151章：风暴试炼</a>
 <a href="chapter-152.html" class="sidebar-chapter ">第152章：光芒与暗影</a>
 <a href="chapter-153.html" class="sidebar-chapter ">第153章：天空之战（上）</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(123)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(123)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-124.html b/alacarte-novel-website/chapters/chapter-124.html
index 995e3c1..a70e589 100644
--- a/alacarte-novel-website/chapters/chapter-124.html
+++ b/alacarte-novel-website/chapters/chapter-124.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>番外·与马琳的骑士之道 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 124</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>番外·与马琳的骑士之道 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 124</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>皇女庭院，天界最美的花园。</p>
 <p>阳光透过精心修剪的树木，洒在铺满鲜花的地面上。这里是天界皇族专属的庭院，只有皇女艾丽婕和她的亲信才能进入。而今天，林克作为皇女的贵客，被邀请到这里。</p>
 <p>庭院的深处，马琳正在训练。</p>
@@ -680,56 +679,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百二十四章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（番外·马琳篇 完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-123.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-125.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-123.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-125.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-94.html" class="sidebar-chapter ">第94章：克洛诺斯岛·寂静城的召唤</a>
 <a href="chapter-95.html" class="sidebar-chapter ">第95章：寂静城的秘密</a>
 <a href="chapter-96.html" class="sidebar-chapter ">第96章：番外·贝奇的献身</a>
@@ -791,190 +796,211 @@
 <a href="chapter-152.html" class="sidebar-chapter ">第152章：光芒与暗影</a>
 <a href="chapter-153.html" class="sidebar-chapter ">第153章：天空之战（上）</a>
 <a href="chapter-154.html" class="sidebar-chapter ">第154章：天空之战（中）</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(124)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(124)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-125.html b/alacarte-novel-website/chapters/chapter-125.html
index 95f029f..b808460 100644
--- a/alacarte-novel-website/chapters/chapter-125.html
+++ b/alacarte-novel-website/chapters/chapter-125.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>番外·与皇女的皇家约会 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 125</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>番外·与皇女的皇家约会 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 125</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>皇女艾丽婕的行宫，天界最华丽的宫殿。</p>
 <p>金色的阳光洒在宫殿的琉璃瓦上，反射出耀眼的光芒。这座宫殿是天界皇族的专属居所，只有最高级别的贵族才能进入。而今天，林克作为皇女的特邀客人，被侍从引入这座华丽的殿堂。</p>
 <p>宫殿内部装饰得金碧辉煌。精美的壁画、华丽的吊灯、柔软的地毯...每一个细节都彰显着皇家的尊贵。侍从们恭敬地站在两侧，目光中带着好奇和敬意。</p>
@@ -667,56 +666,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百二十五章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（番外·皇女篇 完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-124.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-126.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-124.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-126.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-95.html" class="sidebar-chapter ">第95章：寂静城的秘密</a>
 <a href="chapter-96.html" class="sidebar-chapter ">第96章：番外·贝奇的献身</a>
 <a href="chapter-97.html" class="sidebar-chapter ">第97章：光之舞会</a>
@@ -778,190 +783,211 @@
 <a href="chapter-153.html" class="sidebar-chapter ">第153章：天空之战（上）</a>
 <a href="chapter-154.html" class="sidebar-chapter ">第154章：天空之战（中）</a>
 <a href="chapter-155.html" class="sidebar-chapter ">第155章：天空之战（下）</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(125)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(125)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-126.html b/alacarte-novel-website/chapters/chapter-126.html
index dd43158..693d43a 100644
--- a/alacarte-novel-website/chapters/chapter-126.html
+++ b/alacarte-novel-website/chapters/chapter-126.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>番外·与米娅的工坊时光 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 126</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>番外·与米娅的工坊时光 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 126</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>安徒恩战役结束后，天界进入了重建阶段。</p>
 <p>林克作为天界的英雄，被各方邀请。但他最想去的，是七神之鞘翅工坊。</p>
 <p>那里有一个人——米娅。</p>
@@ -849,56 +848,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百二十六章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（番外·米娅篇）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-125.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-127.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-125.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-127.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-96.html" class="sidebar-chapter ">第96章：番外·贝奇的献身</a>
 <a href="chapter-97.html" class="sidebar-chapter ">第97章：光之舞会</a>
 <a href="chapter-98.html" class="sidebar-chapter ">第98章：钢铁之臂</a>
@@ -960,190 +965,211 @@
 <a href="chapter-154.html" class="sidebar-chapter ">第154章：天空之战（中）</a>
 <a href="chapter-155.html" class="sidebar-chapter ">第155章：天空之战（下）</a>
 <a href="chapter-156.html" class="sidebar-chapter ">第156章：格兰之森异象</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(126)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(126)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-127.html b/alacarte-novel-website/chapters/chapter-127.html
index 469aebd..6825110 100644
--- a/alacarte-novel-website/chapters/chapter-127.html
+++ b/alacarte-novel-website/chapters/chapter-127.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>番外·与贝奇的人造之心 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 127</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>番外·与贝奇的人造之心 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 127</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>寂静城，卢克的机械王国。</p>
 <p>钢铁的走廊、精密的机械、闪烁的灯光...这里的一切都散发着科技的气息。作为使徒卢克的居所，寂静城曾经是充满危险的地方。但现在，卢克已经回归平静，这座机械之城也变得相对安全。</p>
 <p>林克走在寂静城的走廊上，目的地是贝奇的房间。</p>
@@ -678,56 +677,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百二十七章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（番外·贝奇篇 完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-126.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-128.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-126.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-128.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-97.html" class="sidebar-chapter ">第97章：光之舞会</a>
 <a href="chapter-98.html" class="sidebar-chapter ">第98章：钢铁之臂</a>
 <a href="chapter-99.html" class="sidebar-chapter ">第99章：能源熔炉</a>
@@ -789,190 +794,211 @@
 <a href="chapter-155.html" class="sidebar-chapter ">第155章：天空之战（下）</a>
 <a href="chapter-156.html" class="sidebar-chapter ">第156章：格兰之森异象</a>
 <a href="chapter-157.html" class="sidebar-chapter ">第157章：魔界深处</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(127)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(127)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-128.html b/alacarte-novel-website/chapters/chapter-128.html
index faab890..043583c 100644
--- a/alacarte-novel-website/chapters/chapter-128.html
+++ b/alacarte-novel-website/chapters/chapter-128.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>番外·与艾泽拉的守护誓言 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 128</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>番外·与艾泽拉的守护誓言 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 128</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>寂静城，艾泽拉的居所。</p>
 <p>这里与贝奇的房间不同，更加安静、更加深沉。房间里的灯光柔和而温暖，墙上挂着各种图纸和设计，桌上堆满了研究资料。作为卢克的助手，艾泽拉的工作繁重而复杂。</p>
 <p>林克敲响艾泽拉的房门。</p>
@@ -674,56 +673,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百二十八章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（番外·艾泽拉篇 完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-127.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-129.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-127.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-129.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-98.html" class="sidebar-chapter ">第98章：钢铁之臂</a>
 <a href="chapter-99.html" class="sidebar-chapter ">第99章：能源熔炉</a>
 <a href="chapter-100.html" class="sidebar-chapter ">第100章：王之书库</a>
@@ -785,190 +790,211 @@
 <a href="chapter-156.html" class="sidebar-chapter ">第156章：格兰之森异象</a>
 <a href="chapter-157.html" class="sidebar-chapter ">第157章：魔界深处</a>
 <a href="chapter-158.html" class="sidebar-chapter ">第158章：幻象迷宫</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(128)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(128)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-129.html b/alacarte-novel-website/chapters/chapter-129.html
index 8de09ac..6ef472d 100644
--- a/alacarte-novel-website/chapters/chapter-129.html
+++ b/alacarte-novel-website/chapters/chapter-129.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>魔界的召唤 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 129</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>魔界的召唤 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 129</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>清晨的阳光透过窗帘洒进房间，林克被一阵轻轻的敲门声唤醒。</p>
 <p>"林克哥哥，有你的信！"敏泰的声音从门外传来。</p>
 <p>林克起身开门，敏泰递给他一封紫色信封。信封上没有寄信人的名字，只有一个熟悉的印记——艾丽丝的占卜牌花纹。</p>
@@ -644,56 +643,62 @@
 <p>艾丽丝，我来了。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百二十九章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-128.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-130.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-128.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-130.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-99.html" class="sidebar-chapter ">第99章：能源熔炉</a>
 <a href="chapter-100.html" class="sidebar-chapter ">第100章：王之书库</a>
 <a href="chapter-101.html" class="sidebar-chapter ">第101章：不灭回廊</a>
@@ -755,190 +760,211 @@
 <a href="chapter-157.html" class="sidebar-chapter ">第157章：魔界深处</a>
 <a href="chapter-158.html" class="sidebar-chapter ">第158章：幻象迷宫</a>
 <a href="chapter-159.html" class="sidebar-chapter ">第159章：无形之战</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(129)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(129)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-13.html b/alacarte-novel-website/chapters/chapter-13.html
index fcabfde..ee46c79 100644
--- a/alacarte-novel-website/chapters/chapter-13.html
+++ b/alacarte-novel-website/chapters/chapter-13.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>龙人之塔 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 13</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>龙人之塔 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 13</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>踏入传送阵的瞬间，林克感觉身体被一股柔和的力量托起。</p>
 <p>眼前的景象快速变化——西海岸的街道消失了，取而代之的是一片云海。当他们再次睁开眼睛时，已经来到了一片完全陌生的天地。</p>
 <p>这里是一座巨大的石塔，塔身由白色的石材建成，在阳光的照射下泛着柔和的光芒。塔的四周是无尽的云海，偶尔能看到其他浮空建筑的轮廓。</p>
@@ -617,56 +616,62 @@
 <p>这个看似冷漠的老人，其实一直在用自己的方式保护着他们。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第十三章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-12.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-14.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-12.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-14.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-1.html" class="sidebar-chapter ">第1章：洛兰的风</a>
 <a href="chapter-2.html" class="sidebar-chapter ">第2章：洛兰深处</a>
 <a href="chapter-3.html" class="sidebar-chapter ">第3章：幽暗密林</a>
@@ -710,190 +715,211 @@
 <a href="chapter-41.html" class="sidebar-chapter ">第41章：敏泰的加入</a>
 <a href="chapter-42.html" class="sidebar-chapter ">第42章：山脊·野兽师</a>
 <a href="chapter-43.html" class="sidebar-chapter ">第43章：番外·雪山温泉</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(13)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(13)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-130.html b/alacarte-novel-website/chapters/chapter-130.html
index ce6cc20..68e96b4 100644
--- a/alacarte-novel-website/chapters/chapter-130.html
+++ b/alacarte-novel-website/chapters/chapter-130.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>魔界营地 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 130</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>魔界营地 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 130</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>魔界营地坐落在地轨中心的东南角，是一片由废墟构成的避难所。</p>
 <p>林克跟着尼梅尔走过崎岖的道路，眼前的景象逐渐清晰——残破的建筑被改造成了临时的住所，街道上行人稀少，每个人脸上都带着疲惫和警惕。</p>
 <p>"这里就是魔界营地。"尼梅尔介绍道，"是被赫尔德伤害的人聚集的地方。有被使徒力量侵蚀的幸存者，有被驱逐的魔界人，还有一些像我一样的冒险家。"</p>
@@ -644,56 +643,62 @@
 <p>两人在紫色的月光下相拥，享受着难得的宁静时光。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百三十章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-129.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-131.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-129.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-131.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-100.html" class="sidebar-chapter ">第100章：王之书库</a>
 <a href="chapter-101.html" class="sidebar-chapter ">第101章：不灭回廊</a>
 <a href="chapter-102.html" class="sidebar-chapter ">第102章：机械王座</a>
@@ -755,190 +760,211 @@
 <a href="chapter-158.html" class="sidebar-chapter ">第158章：幻象迷宫</a>
 <a href="chapter-159.html" class="sidebar-chapter ">第159章：无形之战</a>
 <a href="chapter-160.html" class="sidebar-chapter ">第160章：无形者的秘密</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(130)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(130)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-131.html b/alacarte-novel-website/chapters/chapter-131.html
index 0b01c83..fc14bcb 100644
--- a/alacarte-novel-website/chapters/chapter-131.html
+++ b/alacarte-novel-website/chapters/chapter-131.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>凯蒂的指引 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 131</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>凯蒂的指引 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 131</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>清晨，紫色的天空依然没有变化。</p>
 <p>林克走出教堂，艾丽丝已经在外面等着了。她穿着简单的长袍，法杖握在手中，紫色的长发在微风中轻轻飘动。</p>
 <p>"早安。"艾丽丝微笑道。</p>
@@ -669,56 +668,62 @@
 <p>战斗，即将开始。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百三十一章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-130.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-132.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-130.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-132.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-101.html" class="sidebar-chapter ">第101章：不灭回廊</a>
 <a href="chapter-102.html" class="sidebar-chapter ">第102章：机械王座</a>
 <a href="chapter-103.html" class="sidebar-chapter ">第103章：番外·寂静城的早晨</a>
@@ -780,190 +785,211 @@
 <a href="chapter-159.html" class="sidebar-chapter ">第159章：无形之战</a>
 <a href="chapter-160.html" class="sidebar-chapter ">第160章：无形者的秘密</a>
 <a href="chapter-161.html" class="sidebar-chapter ">第161章：光之试炼</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(131)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(131)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-132.html b/alacarte-novel-website/chapters/chapter-132.html
index 69b7571..8d8b871 100644
--- a/alacarte-novel-website/chapters/chapter-132.html
+++ b/alacarte-novel-website/chapters/chapter-132.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>营地危机 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 132</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>营地危机 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 132</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>营地边缘，气氛紧绷如弦。</p>
 <p>数十名黑甲士兵排成阵列，手持长剑和盾牌，眼中闪烁着凶光。在他们身后，一个身材高大的男人缓缓走出——他穿着暗红色的铠甲，手中握着一把足有半人高的巨剑，剑身上刻着诡异的符文，散发着血色的光芒。</p>
 <p>"铁血卡尔..."尼梅尔的声音微微颤抖，"他是赫尔德麾下最强的将军之一，号称'血狱之剑'..."</p>
@@ -669,56 +668,62 @@
 <p>凯蒂笑了笑："那就这么定了。中央公园...也许那里有你们需要的东西。"</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百三十二章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-131.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-133.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-131.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-133.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-102.html" class="sidebar-chapter ">第102章：机械王座</a>
 <a href="chapter-103.html" class="sidebar-chapter ">第103章：番外·寂静城的早晨</a>
 <a href="chapter-104.html" class="sidebar-chapter ">第104章：番外·贝奇与艾泽拉</a>
@@ -780,190 +785,211 @@
 <a href="chapter-160.html" class="sidebar-chapter ">第160章：无形者的秘密</a>
 <a href="chapter-161.html" class="sidebar-chapter ">第161章：光之试炼</a>
 <a href="chapter-162.html" class="sidebar-chapter ">第162章：希洛克的陷阱</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(132)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(132)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-133.html b/alacarte-novel-website/chapters/chapter-133.html
index 31c70b8..4f08598 100644
--- a/alacarte-novel-website/chapters/chapter-133.html
+++ b/alacarte-novel-website/chapters/chapter-133.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>尼梅尔的心意 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 133</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>尼梅尔的心意 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 133</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>清晨的魔界营地笼罩在薄雾中。</p>
 <p>林克站在教堂门口，简单的行囊背在肩上。艾丽丝已经准备好了干粮和水，正在和凯蒂告别。</p>
 <p>"谢谢你这段时间的帮助。"凯蒂说，"艾丽丝，你是个好孩子。"</p>
@@ -681,56 +680,62 @@
 <p>三人沿着道路前进，远处，中央公园的轮廓逐渐显现。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百三十三章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-132.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-134.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-132.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-134.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-103.html" class="sidebar-chapter ">第103章：番外·寂静城的早晨</a>
 <a href="chapter-104.html" class="sidebar-chapter ">第104章：番外·贝奇与艾泽拉</a>
 <a href="chapter-105.html" class="sidebar-chapter ">第105章：番外·卢克的嘱托</a>
@@ -792,190 +797,211 @@
 <a href="chapter-161.html" class="sidebar-chapter ">第161章：光之试炼</a>
 <a href="chapter-162.html" class="sidebar-chapter ">第162章：希洛克的陷阱</a>
 <a href="chapter-163.html" class="sidebar-chapter ">第163章：无形之战</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(133)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(133)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-134.html b/alacarte-novel-website/chapters/chapter-134.html
index 37ce441..8c5be9b 100644
--- a/alacarte-novel-website/chapters/chapter-134.html
+++ b/alacarte-novel-website/chapters/chapter-134.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>中央公园 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 134</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>中央公园 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 134</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>经过两天的跋涉，三人终于看到了中央公园的轮廓。</p>
 <p>与魔界营地的破败不同，中央公园显得繁华许多。高耸的建筑、热闹的街道、来往的人群...这里仿佛是另一个世界。</p>
 <p>"好漂亮..."尼梅尔睁大眼睛，"和营地完全不一样！"</p>
@@ -646,56 +645,62 @@
 <p>"有点意思的气息...你是个剑士？"</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百三十四章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-133.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-135.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-133.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-135.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-104.html" class="sidebar-chapter ">第104章：番外·贝奇与艾泽拉</a>
 <a href="chapter-105.html" class="sidebar-chapter ">第105章：番外·卢克的嘱托</a>
 <a href="chapter-106.html" class="sidebar-chapter ">第106章：时空之门的召唤</a>
@@ -757,190 +762,211 @@
 <a href="chapter-162.html" class="sidebar-chapter ">第162章：希洛克的陷阱</a>
 <a href="chapter-163.html" class="sidebar-chapter ">第163章：无形之战</a>
 <a href="chapter-164.html" class="sidebar-chapter ">第164章：日常的温馨</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(134)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(134)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-135.html b/alacarte-novel-website/chapters/chapter-135.html
index 31f5612..864f818 100644
--- a/alacarte-novel-website/chapters/chapter-135.html
+++ b/alacarte-novel-website/chapters/chapter-135.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>剑圣的试炼 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 135</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>剑圣的试炼 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 135</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>剑冢之中，两股剑气遥遥相对。</p>
 <p>卡西利亚斯站在无数断剑之间，紫色的眼睛上下打量林克。他周身漂浮着十几把剑，每一把都散发着凌厉的剑气。</p>
 <p>"来自阿拉德大陆的剑士..."他淡淡地说，"你的气息不错，但还不够。"</p>
@@ -652,56 +651,62 @@
 <p>"等着我，赫尔德。我一定会阻止你。"</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百三十五章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-134.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-136.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-134.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-136.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-105.html" class="sidebar-chapter ">第105章：番外·卢克的嘱托</a>
 <a href="chapter-106.html" class="sidebar-chapter ">第106章：时空之门的召唤</a>
 <a href="chapter-107.html" class="sidebar-chapter ">第107章：格兰之火</a>
@@ -763,190 +768,211 @@
 <a href="chapter-163.html" class="sidebar-chapter ">第163章：无形之战</a>
 <a href="chapter-164.html" class="sidebar-chapter ">第164章：日常的温馨</a>
 <a href="chapter-165.html" class="sidebar-chapter ">第165章：莎莎的信</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(135)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(135)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-136.html b/alacarte-novel-website/chapters/chapter-136.html
index 6f7c6a5..bb40937 100644
--- a/alacarte-novel-website/chapters/chapter-136.html
+++ b/alacarte-novel-website/chapters/chapter-136.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>地轨中心 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 136</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>地轨中心 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 136</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>地轨中心，魔界最神秘的地方。</p>
 <p>三人站在入口处，看着眼前扭曲的空间。这里的天空不是紫色，而是深黑色，偶尔闪过诡异的光芒。地面布满了裂痕，从中涌出幽蓝色的能量。</p>
 <p>"这里就是地轨中心..."艾丽丝轻声说，"赫尔德的大本营。"</p>
@@ -633,56 +632,62 @@
 <p>战斗，开始了。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百三十六章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-135.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-137.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-135.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-137.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-106.html" class="sidebar-chapter ">第106章：时空之门的召唤</a>
 <a href="chapter-107.html" class="sidebar-chapter ">第107章：格兰之火</a>
 <a href="chapter-108.html" class="sidebar-chapter ">第108章：瘟疫之源</a>
@@ -744,190 +749,211 @@
 <a href="chapter-164.html" class="sidebar-chapter ">第164章：日常的温馨</a>
 <a href="chapter-165.html" class="sidebar-chapter ">第165章：莎莎的信</a>
 <a href="chapter-166.html" class="sidebar-chapter ">第166章：圣者之鸣号</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(136)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(136)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-137.html b/alacarte-novel-website/chapters/chapter-137.html
index 7f5c89e..e8ce17a 100644
--- a/alacarte-novel-website/chapters/chapter-137.html
+++ b/alacarte-novel-website/chapters/chapter-137.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>魔剑士阿斯兰 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 137</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>魔剑士阿斯兰 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 137</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>两剑相交，火花四溅。</p>
 <p>林克感受到一股巨大的力量从阿斯兰的魔剑上传来，整个人被震退了几步。</p>
 <p>"力量不错。"阿斯兰冷笑，"但还远远不够。"</p>
@@ -657,56 +656,62 @@
 <p>林克的眼神变得冰冷："我拒绝。"</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百三十七章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-136.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-138.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-136.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-138.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-107.html" class="sidebar-chapter ">第107章：格兰之火</a>
 <a href="chapter-108.html" class="sidebar-chapter ">第108章：瘟疫之源</a>
 <a href="chapter-109.html" class="sidebar-chapter ">第109章：卡勒特之初</a>
@@ -768,190 +773,211 @@
 <a href="chapter-165.html" class="sidebar-chapter ">第165章：莎莎的信</a>
 <a href="chapter-166.html" class="sidebar-chapter ">第166章：圣者之鸣号</a>
 <a href="chapter-167.html" class="sidebar-chapter ">第167章：黑色大地入口</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(137)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(137)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-138.html b/alacarte-novel-website/chapters/chapter-138.html
index 6cb9603..5d58977 100644
--- a/alacarte-novel-website/chapters/chapter-138.html
+++ b/alacarte-novel-website/chapters/chapter-138.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>泪目之眼 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 138</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>泪目之眼 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 138</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>"我拒绝。"</p>
 <p>林克的声音坚定而冰冷。</p>
 <p>赫尔德的表情没有变化，仿佛早就预料到这个答案。</p>
@@ -657,56 +656,62 @@
 <p>林克站起身："如果能见到他，也许能获得对抗赫尔德的方法。"</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百三十八章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-137.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-139.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-137.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-139.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-108.html" class="sidebar-chapter ">第108章：瘟疫之源</a>
 <a href="chapter-109.html" class="sidebar-chapter ">第109章：卡勒特之初</a>
 <a href="chapter-110.html" class="sidebar-chapter ">第110章：无法地带</a>
@@ -768,190 +773,211 @@
 <a href="chapter-166.html" class="sidebar-chapter ">第166章：圣者之鸣号</a>
 <a href="chapter-167.html" class="sidebar-chapter ">第167章：黑色大地入口</a>
 <a href="chapter-168.html" class="sidebar-chapter ">第168章：焦黑之地深入</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(138)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(138)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-139.html b/alacarte-novel-website/chapters/chapter-139.html
index 0f064a4..e5efdbc 100644
--- a/alacarte-novel-website/chapters/chapter-139.html
+++ b/alacarte-novel-website/chapters/chapter-139.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>使徒会晤 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 139</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>使徒会晤 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 139</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>三天后，莎莎送来了确切的消息。</p>
 <p>"使徒会晤地点在'寂静岭'——魔界边缘的一处隐秘山谷。"她说，"时间是今晚子时。"</p>
 <p>"寂静岭..."艾丽丝思索，"那里有天然的空间屏障，普通冒险家根本无法进入。"</p>
@@ -675,56 +674,62 @@
 <p>"好。"他说，"我去会会他。"</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百三十九章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-138.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-140.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-138.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-140.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-109.html" class="sidebar-chapter ">第109章：卡勒特之初</a>
 <a href="chapter-110.html" class="sidebar-chapter ">第110章：无法地带</a>
 <a href="chapter-111.html" class="sidebar-chapter ">第111章：暗黑圣战</a>
@@ -786,190 +791,211 @@
 <a href="chapter-167.html" class="sidebar-chapter ">第167章：黑色大地入口</a>
 <a href="chapter-168.html" class="sidebar-chapter ">第168章：焦黑之地深入</a>
 <a href="chapter-169.html" class="sidebar-chapter ">第169章：暗黑骑士团</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(139)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(139)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-14.html b/alacarte-novel-website/chapters/chapter-14.html
index d708dd5..88223dd 100644
--- a/alacarte-novel-website/chapters/chapter-14.html
+++ b/alacarte-novel-website/chapters/chapter-14.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>人偶玄关 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 14</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>人偶玄关 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 14</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>第二天，GSD带着林克和赛丽亚来到人偶玄关。</p>
 <p>与龙人之塔不同，这里是一座巨大的宫殿，到处都是精致的雕像和人偶。但空气中弥漫着一股诡异的气息，让人不寒而栗。</p>
 <p>"这里是……人偶玄关？"赛丽亚紧紧跟在GSD身后，"感觉好阴森……"</p>
@@ -627,56 +626,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第十四章完）</p>
 <p><em>未完待续……</em></p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-13.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-15.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-13.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-15.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-1.html" class="sidebar-chapter ">第1章：洛兰的风</a>
 <a href="chapter-2.html" class="sidebar-chapter ">第2章：洛兰深处</a>
 <a href="chapter-3.html" class="sidebar-chapter ">第3章：幽暗密林</a>
@@ -721,190 +726,211 @@
 <a href="chapter-42.html" class="sidebar-chapter ">第42章：山脊·野兽师</a>
 <a href="chapter-43.html" class="sidebar-chapter ">第43章：番外·雪山温泉</a>
 <a href="chapter-44.html" class="sidebar-chapter ">第44章：白色废墟</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(14)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(14)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-140.html b/alacarte-novel-website/chapters/chapter-140.html
index fc30f98..ad1e97c 100644
--- a/alacarte-novel-website/chapters/chapter-140.html
+++ b/alacarte-novel-website/chapters/chapter-140.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>复仇之剑 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 140</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>复仇之剑 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 140</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>中央公园外围，一片荒芜的平原。</p>
 <p>林克独自一人站在那里，等待着对手的出现。</p>
 <p>艾丽丝和尼梅尔想要跟来，但被他拒绝了。这是他和卡尔之间的恩怨，他要亲手了结。</p>
@@ -656,56 +655,62 @@
 <p>"等着我，赫尔德。我会阻止你的。"</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百四十章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-139.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-141.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-139.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-141.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-110.html" class="sidebar-chapter ">第110章：无法地带</a>
 <a href="chapter-111.html" class="sidebar-chapter ">第111章：暗黑圣战</a>
 <a href="chapter-112.html" class="sidebar-chapter ">第112章：昔日悲鸣</a>
@@ -767,190 +772,211 @@
 <a href="chapter-168.html" class="sidebar-chapter ">第168章：焦黑之地深入</a>
 <a href="chapter-169.html" class="sidebar-chapter ">第169章：暗黑骑士团</a>
 <a href="chapter-170.html" class="sidebar-chapter ">第170章：黑暗中的记忆</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(140)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(140)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-141.html b/alacarte-novel-website/chapters/chapter-141.html
index 0adb640..8b73810 100644
--- a/alacarte-novel-website/chapters/chapter-141.html
+++ b/alacarte-novel-website/chapters/chapter-141.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>寂静城再访 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 141</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>寂静城再访 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 141</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>寂静城，林克曾经拯救过的地方。</p>
 <p>当三人踏入这座城市时，熟悉的感觉涌上心头。高耸的建筑、神秘的能量、以及那个坐在古老能量核心旁边的老人。</p>
 <p>卢克。</p>
@@ -640,56 +639,62 @@
 <p>他转身，走向城市深处："现在，开始试炼吧。"</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百四十一章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-140.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-142.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-140.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-142.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-111.html" class="sidebar-chapter ">第111章：暗黑圣战</a>
 <a href="chapter-112.html" class="sidebar-chapter ">第112章：昔日悲鸣</a>
 <a href="chapter-113.html" class="sidebar-chapter ">第113章：凛冬</a>
@@ -751,190 +756,211 @@
 <a href="chapter-169.html" class="sidebar-chapter ">第169章：暗黑骑士团</a>
 <a href="chapter-170.html" class="sidebar-chapter ">第170章：黑暗中的记忆</a>
 <a href="chapter-171.html" class="sidebar-chapter ">第171章：混沌王座</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(141)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(141)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-142.html b/alacarte-novel-website/chapters/chapter-142.html
index 9902c12..0f79dee 100644
--- a/alacarte-novel-website/chapters/chapter-142.html
+++ b/alacarte-novel-website/chapters/chapter-142.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>时间之钥 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 142</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>时间之钥 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 142</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>寂静城深处，一扇古老的大门矗立在林克面前。</p>
 <p>门上刻满了复杂的符文，散发着淡淡的金色光芒。卢克站在门边，浑浊的眼睛看着林克。</p>
 <p>"这扇门后面，是'时间回廊'。"卢克说，"在那里，时间是不稳定的。你会遇到过去的敌人、过去的自己...甚至可能的未来。"</p>
@@ -650,56 +649,62 @@
 <p>"不管多困难，我都会找到方法。"</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百四十二章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-141.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-143.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-141.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-143.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-112.html" class="sidebar-chapter ">第112章：昔日悲鸣</a>
 <a href="chapter-113.html" class="sidebar-chapter ">第113章：凛冬</a>
 <a href="chapter-114.html" class="sidebar-chapter ">第114章：迷之觉悟</a>
@@ -761,190 +766,211 @@
 <a href="chapter-170.html" class="sidebar-chapter ">第170章：黑暗中的记忆</a>
 <a href="chapter-171.html" class="sidebar-chapter ">第171章：混沌王座</a>
 <a href="chapter-172.html" class="sidebar-chapter ">第172章：混沌之神的力量</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(142)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(142)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-143.html b/alacarte-novel-website/chapters/chapter-143.html
index ade992f..0c8476a 100644
--- a/alacarte-novel-website/chapters/chapter-143.html
+++ b/alacarte-novel-website/chapters/chapter-143.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>翡翠梦魇 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 143</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>翡翠梦魇 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 143</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>中央公园，莎莎的情报屋。</p>
 <p>"翡翠梦魇？"莎莎看着林克，"你们确定要去那里？"</p>
 <p>"是的。"林克点头，"听说那里可能有空间之心的线索。"</p>
@@ -645,56 +644,62 @@
 <p>"自由...我已经很久没有感受过了..."</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百四十三章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-142.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-144.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-142.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-144.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-113.html" class="sidebar-chapter ">第113章：凛冬</a>
 <a href="chapter-114.html" class="sidebar-chapter ">第114章：迷之觉悟</a>
 <a href="chapter-115.html" class="sidebar-chapter ">第115章：番外·艾丽丝的抉择</a>
@@ -756,190 +761,211 @@
 <a href="chapter-171.html" class="sidebar-chapter ">第171章：混沌王座</a>
 <a href="chapter-172.html" class="sidebar-chapter ">第172章：混沌之神的力量</a>
 <a href="chapter-173.html" class="sidebar-chapter ">第173章：米歇尔的羁绊</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(143)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(143)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-144.html b/alacarte-novel-website/chapters/chapter-144.html
index ce79323..d1bef7a 100644
--- a/alacarte-novel-website/chapters/chapter-144.html
+++ b/alacarte-novel-website/chapters/chapter-144.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>诅咒的守护者 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 144</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>诅咒的守护者 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 144</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>希尔薇坐在古树下，讲述着她的过去。</p>
 <p>"三百年前，翡翠之森是魔界最美的森林。"她说，"我的族人生活在这里，与自然和谐共处。"</p>
 <p>"那时候，我是精灵族的公主，被族人爱护着。"</p>
@@ -634,56 +633,62 @@
 <p>希尔薇看着他，眼中闪过一丝迷茫："我不知道...我已经三百年没有自由了。"</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百四十四章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-143.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-145.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-143.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-145.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-114.html" class="sidebar-chapter ">第114章：迷之觉悟</a>
 <a href="chapter-115.html" class="sidebar-chapter ">第115章：番外·艾丽丝的抉择</a>
 <a href="chapter-116.html" class="sidebar-chapter ">第116章：番外·后宫的日常</a>
@@ -745,190 +750,211 @@
 <a href="chapter-172.html" class="sidebar-chapter ">第172章：混沌之神的力量</a>
 <a href="chapter-173.html" class="sidebar-chapter ">第173章：米歇尔的羁绊</a>
 <a href="chapter-174.html" class="sidebar-chapter ">第174章：创世之光的净化</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(144)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(144)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-145.html b/alacarte-novel-website/chapters/chapter-145.html
index cb1fb3b..9c83dc7 100644
--- a/alacarte-novel-website/chapters/chapter-145.html
+++ b/alacarte-novel-website/chapters/chapter-145.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>精灵的誓言 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 145</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>精灵的誓言 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 145</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>夜幕降临，翡翠之森恢复了宁静。</p>
 <p>四人坐在古树下，享受着难得的平静时光。</p>
 <p>希尔薇看着天空中的紫色月亮，眼中满是感慨。</p>
@@ -626,56 +625,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百四十五章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（翡翠梦魇篇 完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-144.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-146.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-144.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-146.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-115.html" class="sidebar-chapter ">第115章：番外·艾丽丝的抉择</a>
 <a href="chapter-116.html" class="sidebar-chapter ">第116章：番外·后宫的日常</a>
 <a href="chapter-117.html" class="sidebar-chapter ">第117章：番外·与赛丽亚的约会</a>
@@ -737,190 +742,211 @@
 <a href="chapter-173.html" class="sidebar-chapter ">第173章：米歇尔的羁绊</a>
 <a href="chapter-174.html" class="sidebar-chapter ">第174章：创世之光的净化</a>
 <a href="chapter-175.html" class="sidebar-chapter ">第175章：混沌的终结</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(145)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(145)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-146.html b/alacarte-novel-website/chapters/chapter-146.html
index 1bc01b6..80277a2 100644
--- a/alacarte-novel-website/chapters/chapter-146.html
+++ b/alacarte-novel-website/chapters/chapter-146.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>深渊之眼 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 146</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>深渊之眼 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 146</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>地轨中心，深渊之眼入口。</p>
 <p>四人站在一扇巨大的黑色大门前。门上刻满了诡异的符文，散发着令人窒息的压迫感。从门缝中渗出的黑暗气息，仿佛能吞噬一切光明。</p>
 <p>"这就是深渊之眼..."艾丽丝轻声说，"地轨中心的最深处，赫尔德举行创新世纪仪式的地方。"</p>
@@ -634,56 +633,62 @@
 <p>战斗，一触即发。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百四十六章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-145.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-147.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-145.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-147.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-116.html" class="sidebar-chapter ">第116章：番外·后宫的日常</a>
 <a href="chapter-117.html" class="sidebar-chapter ">第117章：番外·与赛丽亚的约会</a>
 <a href="chapter-118.html" class="sidebar-chapter ">第118章：番外·与奥菲利亚的重逢</a>
@@ -745,190 +750,211 @@
 <a href="chapter-174.html" class="sidebar-chapter ">第174章：创世之光的净化</a>
 <a href="chapter-175.html" class="sidebar-chapter ">第175章：混沌的终结</a>
 <a href="chapter-176.html" class="sidebar-chapter ">第176章：篇章落幕</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(146)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(146)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-147.html b/alacarte-novel-website/chapters/chapter-147.html
index f4be8f7..bcb4618 100644
--- a/alacarte-novel-website/chapters/chapter-147.html
+++ b/alacarte-novel-website/chapters/chapter-147.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>赫尔德的仪式 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 147</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>赫尔德的仪式 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 147</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>"你还是没有改变主意吗？"赫尔德看着林克，眼中闪过一丝遗憾。</p>
 <p>"没有。"林克坚定地说，"我不会让你牺牲无辜的人。"</p>
 <p>赫尔德叹了口气："你总是这么固执。"</p>
@@ -684,56 +683,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百四十七章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（魔界篇·赫尔德之战 完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-146.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-148.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-146.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-148.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-117.html" class="sidebar-chapter ">第117章：番外·与赛丽亚的约会</a>
 <a href="chapter-118.html" class="sidebar-chapter ">第118章：番外·与奥菲利亚的重逢</a>
 <a href="chapter-119.html" class="sidebar-chapter ">第119章：番外·与敏泰的雪山之行</a>
@@ -795,190 +800,211 @@
 <a href="chapter-175.html" class="sidebar-chapter ">第175章：混沌的终结</a>
 <a href="chapter-176.html" class="sidebar-chapter ">第176章：篇章落幕</a>
 <a href="chapter-177.html" class="sidebar-chapter ">第177章：番外·米歇尔的最后祝福</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(147)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(147)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-148.html b/alacarte-novel-website/chapters/chapter-148.html
index e973d19..e90f56e 100644
--- a/alacarte-novel-website/chapters/chapter-148.html
+++ b/alacarte-novel-website/chapters/chapter-148.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>战后余晖 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 148</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>战后余晖 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 148</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>林克睁开眼睛，看到一片熟悉的天花板。</p>
 <p>"他醒了！"</p>
 <p>尼梅尔的声音在耳边响起，随即是一张担心的脸出现在视野中。</p>
@@ -657,56 +656,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百四十八章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（魔界篇 完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（泰波尔斯篇 预告）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-147.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-149.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-147.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-149.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-118.html" class="sidebar-chapter ">第118章：番外·与奥菲利亚的重逢</a>
 <a href="chapter-119.html" class="sidebar-chapter ">第119章：番外·与敏泰的雪山之行</a>
 <a href="chapter-120.html" class="sidebar-chapter ">第120章：番外·与莎兰的魔法时光</a>
@@ -768,190 +773,211 @@
 <a href="chapter-176.html" class="sidebar-chapter ">第176章：篇章落幕</a>
 <a href="chapter-177.html" class="sidebar-chapter ">第177章：番外·米歇尔的最后祝福</a>
 <a href="chapter-178.html" class="sidebar-chapter ">第178章：番外·奥兹玛的遗言</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(148)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(148)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-149.html b/alacarte-novel-website/chapters/chapter-149.html
index 496bd13..f616b5f 100644
--- a/alacarte-novel-website/chapters/chapter-149.html
+++ b/alacarte-novel-website/chapters/chapter-149.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>泰波尔斯的召唤 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 149</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>泰波尔斯的召唤 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 149</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>赛丽亚旅馆，阳光明媚的早晨。</p>
 <p>林克坐在旅馆的院子里，享受着难得的平静时光。自从魔界篇结束后，他已经休息了整整一周。</p>
 <p>"林克，茶泡好了。"赛丽亚端着茶盘走过来，脸上带着温柔的微笑。</p>
@@ -638,56 +637,62 @@
 <p>"普雷大人，我来帮你！"</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百四十九章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-148.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-150.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-148.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-150.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-119.html" class="sidebar-chapter ">第119章：番外·与敏泰的雪山之行</a>
 <a href="chapter-120.html" class="sidebar-chapter ">第120章：番外·与莎兰的魔法时光</a>
 <a href="chapter-121.html" class="sidebar-chapter ">第121章：番外·与帕丽丝的格斗训练</a>
@@ -748,190 +753,211 @@
 <a href="chapter-176.html" class="sidebar-chapter ">第176章：篇章落幕</a>
 <a href="chapter-177.html" class="sidebar-chapter ">第177章：番外·米歇尔的最后祝福</a>
 <a href="chapter-178.html" class="sidebar-chapter ">第178章：番外·奥兹玛的遗言</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(149)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(149)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-15.html b/alacarte-novel-website/chapters/chapter-15.html
index a7acc96..199bf8c 100644
--- a/alacarte-novel-website/chapters/chapter-15.html
+++ b/alacarte-novel-website/chapters/chapter-15.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>石巨人塔 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 15</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>石巨人塔 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 15</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>离开人偶玄关时，天空之城的阳光依旧明媚。</p>
 <p>但林克的心情并不轻松。GSD的离去意味着接下来的路必须靠他们自己，而石巨人塔——那座传闻中比龙人之塔和人偶玄关更加危险的区域，正等待着他们。</p>
 <p>"先去赫顿玛尔。"林克收起晨曦，"出发前，我想找一个人。"</p>
@@ -695,56 +694,62 @@
 <p>而天空之城的秘密，也正在一步步揭开……</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第十五章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-14.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-16.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-14.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-16.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-1.html" class="sidebar-chapter ">第1章：洛兰的风</a>
 <a href="chapter-2.html" class="sidebar-chapter ">第2章：洛兰深处</a>
 <a href="chapter-3.html" class="sidebar-chapter ">第3章：幽暗密林</a>
@@ -790,190 +795,211 @@
 <a href="chapter-43.html" class="sidebar-chapter ">第43章：番外·雪山温泉</a>
 <a href="chapter-44.html" class="sidebar-chapter ">第44章：白色废墟</a>
 <a href="chapter-45.html" class="sidebar-chapter ">第45章：冰雪宫殿</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(15)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(15)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-150.html b/alacarte-novel-website/chapters/chapter-150.html
index c1757d1..067e5cf 100644
--- a/alacarte-novel-website/chapters/chapter-150.html
+++ b/alacarte-novel-website/chapters/chapter-150.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>天空之城 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 150</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>天空之城 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 150</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>林克冲向伊西斯，细雪之舞划出一道冰蓝色的弧线。</p>
 <p>"流心：刺！"</p>
 <p>剑尖直取伊西斯的胸口，但被一道黑色的屏障挡住了。</p>
@@ -635,56 +634,62 @@
 <p>"来吧！"</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百五十章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-149.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-151.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-149.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-151.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-120.html" class="sidebar-chapter ">第120章：番外·与莎兰的魔法时光</a>
 <a href="chapter-121.html" class="sidebar-chapter ">第121章：番外·与帕丽丝的格斗训练</a>
 <a href="chapter-122.html" class="sidebar-chapter ">第122章：番外·与莫纳亨的念动力</a>
@@ -744,190 +749,211 @@
 <a href="chapter-176.html" class="sidebar-chapter ">第176章：篇章落幕</a>
 <a href="chapter-177.html" class="sidebar-chapter ">第177章：番外·米歇尔的最后祝福</a>
 <a href="chapter-178.html" class="sidebar-chapter ">第178章：番外·奥兹玛的遗言</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(150)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(150)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-151.html b/alacarte-novel-website/chapters/chapter-151.html
index 2e5d822..c699ad4 100644
--- a/alacarte-novel-website/chapters/chapter-151.html
+++ b/alacarte-novel-website/chapters/chapter-151.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>风暴试炼 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 151</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>风暴试炼 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 151</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>风暴之主挥动长矛，一道巨大的风刃横扫而出。</p>
 <p>"风暴斩！"</p>
 <p>风刃带着撕裂一切的威力，朝四人袭来。林克举剑格挡，但风刃的力量太强，他被震退了好几步。</p>
@@ -642,56 +641,62 @@
 <p>"还有两道..."林克喘着气，"继续！"</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百五十一章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-150.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-152.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-150.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-152.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-121.html" class="sidebar-chapter ">第121章：番外·与帕丽丝的格斗训练</a>
 <a href="chapter-122.html" class="sidebar-chapter ">第122章：番外·与莫纳亨的念动力</a>
 <a href="chapter-123.html" class="sidebar-chapter ">第123章：番外·与泽丁的天界巡逻</a>
@@ -750,190 +755,211 @@
 <a href="chapter-176.html" class="sidebar-chapter ">第176章：篇章落幕</a>
 <a href="chapter-177.html" class="sidebar-chapter ">第177章：番外·米歇尔的最后祝福</a>
 <a href="chapter-178.html" class="sidebar-chapter ">第178章：番外·奥兹玛的遗言</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(151)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(151)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-152.html b/alacarte-novel-website/chapters/chapter-152.html
index 9559e12..282d9cc 100644
--- a/alacarte-novel-website/chapters/chapter-152.html
+++ b/alacarte-novel-website/chapters/chapter-152.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>光芒与暗影 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 152</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>光芒与暗影 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 152</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>光芒试炼的场地是一片纯白的空间。</p>
 <p>这里没有天空和地面，只有无尽的光芒。在光芒的中心，站着一个全身发光的身影。</p>
 <p>光芒之主，一个没有具体形态的存在，只有轮廓和光芒。</p>
@@ -620,56 +619,62 @@
 <p>普雷站起身，金色的光芒再次散发："我已经等了很久了。"</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百五十二章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-151.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-153.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-151.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-153.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-122.html" class="sidebar-chapter ">第122章：番外·与莫纳亨的念动力</a>
 <a href="chapter-123.html" class="sidebar-chapter ">第123章：番外·与泽丁的天界巡逻</a>
 <a href="chapter-124.html" class="sidebar-chapter ">第124章：番外·与马琳的骑士之道</a>
@@ -727,190 +732,211 @@
 <a href="chapter-176.html" class="sidebar-chapter ">第176章：篇章落幕</a>
 <a href="chapter-177.html" class="sidebar-chapter ">第177章：番外·米歇尔的最后祝福</a>
 <a href="chapter-178.html" class="sidebar-chapter ">第178章：番外·奥兹玛的遗言</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(152)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(152)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-153.html b/alacarte-novel-website/chapters/chapter-153.html
index c7b6ab6..605d39e 100644
--- a/alacarte-novel-website/chapters/chapter-153.html
+++ b/alacarte-novel-website/chapters/chapter-153.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>天空之战（上） - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 153</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>天空之战（上） - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 153</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>泰波尔斯的天空神殿，散发着不祥的黑色气息。</p>
 <p>林克站在神殿入口，感受着里面涌出的压迫感。艾丽丝在他身旁，法杖上凝聚着元素力量。普雷则站在最前方，金色的铠甲在阳光下闪烁着坚定的光芒。</p>
 <p>"林克，你确定要和我一起进去吗？"普雷问道，"伊西斯的力量非常可怕，即使有天空之泪，也不能保证一定能成功。"</p>
@@ -671,56 +670,62 @@
 <p>但黑暗能量已经爆发，整个神殿都被吞噬在黑暗之中...</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百五十三章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-152.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-154.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-152.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-154.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-123.html" class="sidebar-chapter ">第123章：番外·与泽丁的天界巡逻</a>
 <a href="chapter-124.html" class="sidebar-chapter ">第124章：番外·与马琳的骑士之道</a>
 <a href="chapter-125.html" class="sidebar-chapter ">第125章：番外·与皇女的皇家约会</a>
@@ -777,190 +782,211 @@
 <a href="chapter-176.html" class="sidebar-chapter ">第176章：篇章落幕</a>
 <a href="chapter-177.html" class="sidebar-chapter ">第177章：番外·米歇尔的最后祝福</a>
 <a href="chapter-178.html" class="sidebar-chapter ">第178章：番外·奥兹玛的遗言</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(153)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(153)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-154.html b/alacarte-novel-website/chapters/chapter-154.html
index 865b64d..f726d1b 100644
--- a/alacarte-novel-website/chapters/chapter-154.html
+++ b/alacarte-novel-website/chapters/chapter-154.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>天空之战（中） - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 154</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>天空之战（中） - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 154</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>黑暗瞬间吞噬了一切。</p>
 <p>林克感到自己仿佛置身于无尽的虚空之中，周围没有任何光亮，只有令人窒息的黑暗。他的身体被黑暗侵蚀，感到一阵阵剧痛。</p>
 <p>"这就是...黑暗自爆的力量..."</p>
@@ -639,56 +638,62 @@
 <p>她低下头，脸颊微微泛红："林克，我有话想对你说..."</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百五十四章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-153.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-155.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-153.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-155.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-124.html" class="sidebar-chapter ">第124章：番外·与马琳的骑士之道</a>
 <a href="chapter-125.html" class="sidebar-chapter ">第125章：番外·与皇女的皇家约会</a>
 <a href="chapter-126.html" class="sidebar-chapter ">第126章：番外·与米娅的工坊时光</a>
@@ -744,190 +749,211 @@
 <a href="chapter-176.html" class="sidebar-chapter ">第176章：篇章落幕</a>
 <a href="chapter-177.html" class="sidebar-chapter ">第177章：番外·米歇尔的最后祝福</a>
 <a href="chapter-178.html" class="sidebar-chapter ">第178章：番外·奥兹玛的遗言</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(154)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(154)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-155.html b/alacarte-novel-website/chapters/chapter-155.html
index b2983de..1079074 100644
--- a/alacarte-novel-website/chapters/chapter-155.html
+++ b/alacarte-novel-website/chapters/chapter-155.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>天空之战（下） - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 155</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>天空之战（下） - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 155</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>夜幕降临，泰波尔斯的天空被璀璨的星光覆盖。</p>
 <p>林克独自站在天空之城的边缘，看着脚下漂浮的云海和远处闪烁的灯火。战斗结束后，普雷邀请他们在泰波尔斯休息几天，庆祝胜利。</p>
 <p>"终于结束了..."</p>
@@ -682,56 +681,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百五十五章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（泰波尔斯篇 完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（后宫人数更新：17人）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-154.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-156.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-154.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-156.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-125.html" class="sidebar-chapter ">第125章：番外·与皇女的皇家约会</a>
 <a href="chapter-126.html" class="sidebar-chapter ">第126章：番外·与米娅的工坊时光</a>
 <a href="chapter-127.html" class="sidebar-chapter ">第127章：番外·与贝奇的人造之心</a>
@@ -786,190 +791,211 @@
 <a href="chapter-176.html" class="sidebar-chapter ">第176章：篇章落幕</a>
 <a href="chapter-177.html" class="sidebar-chapter ">第177章：番外·米歇尔的最后祝福</a>
 <a href="chapter-178.html" class="sidebar-chapter ">第178章：番外·奥兹玛的遗言</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(155)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(155)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-156.html b/alacarte-novel-website/chapters/chapter-156.html
index 287aa81..a3c5e07 100644
--- a/alacarte-novel-website/chapters/chapter-156.html
+++ b/alacarte-novel-website/chapters/chapter-156.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>格兰之森异象 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 156</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>格兰之森异象 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 156</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>清晨的阳光洒在赛丽亚旅馆的院子里。</p>
 <p>林克早早起床，站在院子里练习剑术。光剑划出一道道优美的弧线，每一招都精准而流畅。</p>
 <p>自从泰波尔斯之战后，他感觉自己的剑道又有了新的领悟。天空之泪的力量与他体内的灵魂之源、时间之钥产生了某种共鸣，让他的实力更进一步。</p>
@@ -663,56 +662,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百五十六章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（希洛克篇 开启）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-155.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-157.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-155.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-157.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-126.html" class="sidebar-chapter ">第126章：番外·与米娅的工坊时光</a>
 <a href="chapter-127.html" class="sidebar-chapter ">第127章：番外·与贝奇的人造之心</a>
 <a href="chapter-128.html" class="sidebar-chapter ">第128章：番外·与艾泽拉的守护誓言</a>
@@ -766,190 +771,211 @@
 <a href="chapter-176.html" class="sidebar-chapter ">第176章：篇章落幕</a>
 <a href="chapter-177.html" class="sidebar-chapter ">第177章：番外·米歇尔的最后祝福</a>
 <a href="chapter-178.html" class="sidebar-chapter ">第178章：番外·奥兹玛的遗言</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(156)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(156)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-157.html b/alacarte-novel-website/chapters/chapter-157.html
index 38a8a09..a66a29c 100644
--- a/alacarte-novel-website/chapters/chapter-157.html
+++ b/alacarte-novel-website/chapters/chapter-157.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>魔界深处 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 157</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>魔界深处 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 157</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>三天后，林克一行人站在寂静城的传送门前。</p>
 <p>这次前往魔界，林克决定带更多的人。除了艾拉、艾丽丝、尼梅尔、希尔薇外，他还邀请了赛丽亚、敏泰和帕丽丝一同前往。</p>
 <p>"希洛克不是普通的敌人。"林克在出发前对大家说，"她是第四使徒，擅长精神控制和幻象。我们需要所有人的力量。"</p>
@@ -650,56 +649,62 @@
 <p>七人踏入峡谷，魔界深处，就在前方。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百五十七章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-156.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-158.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-156.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-158.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-127.html" class="sidebar-chapter ">第127章：番外·与贝奇的人造之心</a>
 <a href="chapter-128.html" class="sidebar-chapter ">第128章：番外·与艾泽拉的守护誓言</a>
 <a href="chapter-129.html" class="sidebar-chapter ">第129章：魔界的召唤</a>
@@ -752,190 +757,211 @@
 <a href="chapter-176.html" class="sidebar-chapter ">第176章：篇章落幕</a>
 <a href="chapter-177.html" class="sidebar-chapter ">第177章：番外·米歇尔的最后祝福</a>
 <a href="chapter-178.html" class="sidebar-chapter ">第178章：番外·奥兹玛的遗言</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(157)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(157)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-158.html b/alacarte-novel-website/chapters/chapter-158.html
index 2f8d9cc..aa01865 100644
--- a/alacarte-novel-website/chapters/chapter-158.html
+++ b/alacarte-novel-website/chapters/chapter-158.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>幻象迷宫 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 158</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>幻象迷宫 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 158</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>峡谷内部是一片奇异的空间。</p>
 <p>紫色的天空变成了深邃的黑色，无数光点在黑暗中闪烁，如同夜空中的星辰。地面是光滑如镜的水晶，倒映着每个人的身影。</p>
 <p>"这里...好奇怪。"敏泰皱眉，"我能感受到一股无形的力量在监视我们。"</p>
@@ -673,56 +672,62 @@
 <p>战斗，才刚刚开始。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百五十八章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-157.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-159.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-157.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-159.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-128.html" class="sidebar-chapter ">第128章：番外·与艾泽拉的守护誓言</a>
 <a href="chapter-129.html" class="sidebar-chapter ">第129章：魔界的召唤</a>
 <a href="chapter-130.html" class="sidebar-chapter ">第130章：魔界营地</a>
@@ -774,190 +779,211 @@
 <a href="chapter-176.html" class="sidebar-chapter ">第176章：篇章落幕</a>
 <a href="chapter-177.html" class="sidebar-chapter ">第177章：番外·米歇尔的最后祝福</a>
 <a href="chapter-178.html" class="sidebar-chapter ">第178章：番外·奥兹玛的遗言</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(158)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(158)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-159.html b/alacarte-novel-website/chapters/chapter-159.html
index fc21876..455050e 100644
--- a/alacarte-novel-website/chapters/chapter-159.html
+++ b/alacarte-novel-website/chapters/chapter-159.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>无形之战 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 159</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>无形之战 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 159</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>无形化身的出现，让整个空间的压力瞬间增加了数倍。</p>
 <p>希洛克的身影被一个巨大的黑色影子包裹，影子的轮廓模糊不定，时而是人形，时而是兽形，时而完全没有固定的形态。无数黑色的剑气从影子中延伸出来，如同蛛网一般覆盖了整个空间。</p>
 <p>"这是我的无形化身。"希洛克的声音从影子的深处传来，"在这个形态下，我没有任何实体限制，可以自由操控空间中的任何力量。"</p>
@@ -651,56 +650,62 @@
 <p>林克看向远方："那就去找。在希洛克完全复苏之前，我们必须做好准备。"</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百五十九章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-158.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-160.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-158.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-160.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-129.html" class="sidebar-chapter ">第129章：魔界的召唤</a>
 <a href="chapter-130.html" class="sidebar-chapter ">第130章：魔界营地</a>
 <a href="chapter-131.html" class="sidebar-chapter ">第131章：凯蒂的指引</a>
@@ -751,190 +756,211 @@
 <a href="chapter-176.html" class="sidebar-chapter ">第176章：篇章落幕</a>
 <a href="chapter-177.html" class="sidebar-chapter ">第177章：番外·米歇尔的最后祝福</a>
 <a href="chapter-178.html" class="sidebar-chapter ">第178章：番外·奥兹玛的遗言</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(159)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(159)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-16.html b/alacarte-novel-website/chapters/chapter-16.html
index f3a7d03..dc8f12c 100644
--- a/alacarte-novel-website/chapters/chapter-16.html
+++ b/alacarte-novel-website/chapters/chapter-16.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>黑暗玄廊 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 16</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>黑暗玄廊 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 16</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>赫顿玛尔，诺顿的炼金工坊。</p>
 <p>当林克将五颗石巨人心脏放在工作台上时，诺顿的眼睛瞪大了。</p>
 <p>"这是……普拉塔尼的核心？"老炼金术师小心翼翼地捧起那颗巨大的魔法石，"你们真的击败了黄金巨人？"</p>
@@ -727,56 +726,62 @@
 <p>黑暗玄廊的冒险结束了，但更大的挑战——与光之城主的会面，即将开始。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第十六章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-15.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-17.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-15.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-17.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-1.html" class="sidebar-chapter ">第1章：洛兰的风</a>
 <a href="chapter-2.html" class="sidebar-chapter ">第2章：洛兰深处</a>
 <a href="chapter-3.html" class="sidebar-chapter ">第3章：幽暗密林</a>
@@ -823,190 +828,211 @@
 <a href="chapter-44.html" class="sidebar-chapter ">第44章：白色废墟</a>
 <a href="chapter-45.html" class="sidebar-chapter ">第45章：冰雪宫殿</a>
 <a href="chapter-46.html" class="sidebar-chapter ">第46章：布万加修炼场</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(16)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(16)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-160.html b/alacarte-novel-website/chapters/chapter-160.html
index 56dd590..4131d9b 100644
--- a/alacarte-novel-website/chapters/chapter-160.html
+++ b/alacarte-novel-website/chapters/chapter-160.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>无形者的秘密 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 160</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>无形者的秘密 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 160</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>返回寂静城后，林克直接倒下了。</p>
 <p>与希洛克的战斗消耗了他所有的力量。三股力量的同时运转——时间之钥、灵魂之源、天空之泪——让他的身体承受了巨大的负担。虽然击退了希洛克，但他自己也到了极限。</p>
 <p>赛丽亚一直守在林克身边，握着他的手。她的眼中满是担忧，但更多的是坚定。</p>
@@ -648,56 +647,62 @@
 <p>四人踏入光之圣殿，迎接他们的，是前所未有的试炼。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百六十章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-159.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-161.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-159.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-161.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-130.html" class="sidebar-chapter ">第130章：魔界营地</a>
 <a href="chapter-131.html" class="sidebar-chapter ">第131章：凯蒂的指引</a>
 <a href="chapter-132.html" class="sidebar-chapter ">第132章：营地危机</a>
@@ -747,190 +752,211 @@
 <a href="chapter-176.html" class="sidebar-chapter ">第176章：篇章落幕</a>
 <a href="chapter-177.html" class="sidebar-chapter ">第177章：番外·米歇尔的最后祝福</a>
 <a href="chapter-178.html" class="sidebar-chapter ">第178章：番外·奥兹玛的遗言</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(160)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(160)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-161.html b/alacarte-novel-website/chapters/chapter-161.html
index 242042c..14058a4 100644
--- a/alacarte-novel-website/chapters/chapter-161.html
+++ b/alacarte-novel-website/chapters/chapter-161.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>光之试炼 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 161</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>光之试炼 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 161</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>踏入光之圣殿，林克感受到一股神圣的力量将他包围。</p>
 <p>与外面的世界不同，圣殿内部一片纯白。没有墙壁，没有地面，没有天花板，只有无尽的光芒。在这种光芒中，林克几乎看不清自己的身体。</p>
 <p>"林克..."赛丽亚的声音从旁边传来。</p>
@@ -665,56 +664,62 @@
 <p>"让我看看，你能否找到我的本体...在我完全复苏之前。"</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百六十一章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-160.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-162.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-160.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-162.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-131.html" class="sidebar-chapter ">第131章：凯蒂的指引</a>
 <a href="chapter-132.html" class="sidebar-chapter ">第132章：营地危机</a>
 <a href="chapter-133.html" class="sidebar-chapter ">第133章：尼梅尔的心意</a>
@@ -763,190 +768,211 @@
 <a href="chapter-176.html" class="sidebar-chapter ">第176章：篇章落幕</a>
 <a href="chapter-177.html" class="sidebar-chapter ">第177章：番外·米歇尔的最后祝福</a>
 <a href="chapter-178.html" class="sidebar-chapter ">第178章：番外·奥兹玛的遗言</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(161)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(161)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-162.html b/alacarte-novel-website/chapters/chapter-162.html
index f231683..f37ed64 100644
--- a/alacarte-novel-website/chapters/chapter-162.html
+++ b/alacarte-novel-website/chapters/chapter-162.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>希洛克的陷阱 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 162</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>希洛克的陷阱 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 162</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>离开光之圣殿后，林克等人开始在泰波尔斯寻找希洛克的本体。</p>
 <p>但很快，她们发现了一个问题——希洛克的侵蚀正在加速。</p>
 <p>原本只有边缘区域被侵蚀，现在连中心区域也开始出现红色的雾气。被侵蚀的生物越来越多，甚至开始出现被控制的天空族战士。</p>
@@ -655,56 +654,62 @@
 <p>战斗，再次爆发。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百六十二章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-161.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-163.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-161.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-163.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-132.html" class="sidebar-chapter ">第132章：营地危机</a>
 <a href="chapter-133.html" class="sidebar-chapter ">第133章：尼梅尔的心意</a>
 <a href="chapter-134.html" class="sidebar-chapter ">第134章：中央公园</a>
@@ -752,190 +757,211 @@
 <a href="chapter-176.html" class="sidebar-chapter ">第176章：篇章落幕</a>
 <a href="chapter-177.html" class="sidebar-chapter ">第177章：番外·米歇尔的最后祝福</a>
 <a href="chapter-178.html" class="sidebar-chapter ">第178章：番外·奥兹玛的遗言</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(162)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(162)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-163.html b/alacarte-novel-website/chapters/chapter-163.html
index f5b809f..5624099 100644
--- a/alacarte-novel-website/chapters/chapter-163.html
+++ b/alacarte-novel-website/chapters/chapter-163.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>无形之战 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 163</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>无形之战 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 163</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>希洛克的无形化身再次展开，巨大的暗影笼罩了整个宫殿。</p>
 <p>林克感到体内的侵蚀越来越强。希洛克的力量在他的血液中流动，试图控制他的精神。但天空之泪、灵魂之源、时间之钥三股力量也在运转，将她的力量压制住。</p>
 <p>"你...到底是怎么做到的？"希洛克看着他，"普通人不可能同时承受三股力量，还能抵抗我的侵蚀。"</p>
@@ -681,56 +680,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百六十三章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（希洛克篇 完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-162.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-164.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-162.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-164.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-133.html" class="sidebar-chapter ">第133章：尼梅尔的心意</a>
 <a href="chapter-134.html" class="sidebar-chapter ">第134章：中央公园</a>
 <a href="chapter-135.html" class="sidebar-chapter ">第135章：剑圣的试炼</a>
@@ -777,190 +782,211 @@
 <a href="chapter-176.html" class="sidebar-chapter ">第176章：篇章落幕</a>
 <a href="chapter-177.html" class="sidebar-chapter ">第177章：番外·米歇尔的最后祝福</a>
 <a href="chapter-178.html" class="sidebar-chapter ">第178章：番外·奥兹玛的遗言</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(163)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(163)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-164.html b/alacarte-novel-website/chapters/chapter-164.html
index eef66c2..3cadc9e 100644
--- a/alacarte-novel-website/chapters/chapter-164.html
+++ b/alacarte-novel-website/chapters/chapter-164.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>日常的温馨 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 164</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>日常的温馨 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 164</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>清晨的阳光透过窗帘洒进房间，林克睁开眼睛，感受到一阵温暖的气息。</p>
 <p>不是一个人，而是好几道。</p>
 <p>赛丽亚躺在他左侧，银色的长发散落在枕头上，呼吸平稳。尼梅尔趴在他右侧，脸上带着满足的笑容。希尔薇则蜷缩在床尾，像一只安静的小猫。</p>
@@ -697,56 +696,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百六十四章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（奥兹玛篇·第一章）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-163.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-165.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-163.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-165.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-134.html" class="sidebar-chapter ">第134章：中央公园</a>
 <a href="chapter-135.html" class="sidebar-chapter ">第135章：剑圣的试炼</a>
 <a href="chapter-136.html" class="sidebar-chapter ">第136章：地轨中心</a>
@@ -792,190 +797,211 @@
 <a href="chapter-176.html" class="sidebar-chapter ">第176章：篇章落幕</a>
 <a href="chapter-177.html" class="sidebar-chapter ">第177章：番外·米歇尔的最后祝福</a>
 <a href="chapter-178.html" class="sidebar-chapter ">第178章：番外·奥兹玛的遗言</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(164)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(164)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-165.html b/alacarte-novel-website/chapters/chapter-165.html
index 238d99c..ec826ae 100644
--- a/alacarte-novel-website/chapters/chapter-165.html
+++ b/alacarte-novel-website/chapters/chapter-165.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>莎莎的信 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 165</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>莎莎的信 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 165</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>看完莎莎的信后，林克立刻做出了决定。</p>
 <p>"我要去中央公园。"他说。</p>
 <p>艾丽丝点头："我跟你去。"</p>
@@ -731,56 +730,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百六十五章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（奥兹玛篇·第二章）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-164.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-166.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-164.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-166.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-135.html" class="sidebar-chapter ">第135章：剑圣的试炼</a>
 <a href="chapter-136.html" class="sidebar-chapter ">第136章：地轨中心</a>
 <a href="chapter-137.html" class="sidebar-chapter ">第137章：魔剑士阿斯兰</a>
@@ -825,190 +830,211 @@
 <a href="chapter-176.html" class="sidebar-chapter ">第176章：篇章落幕</a>
 <a href="chapter-177.html" class="sidebar-chapter ">第177章：番外·米歇尔的最后祝福</a>
 <a href="chapter-178.html" class="sidebar-chapter ">第178章：番外·奥兹玛的遗言</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(165)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(165)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-166.html b/alacarte-novel-website/chapters/chapter-166.html
index 6409f01..b043300 100644
--- a/alacarte-novel-website/chapters/chapter-166.html
+++ b/alacarte-novel-website/chapters/chapter-166.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>圣者之鸣号 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 166</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>圣者之鸣号 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 166</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>第二天一早，林克等人离开中央公园，穿过次元通道回到阿拉德大陆。</p>
 <p>"圣者之鸣号在西海岸的方向。"艾丽丝说，"那是圣职者教团的圣地，平时不对外开放。"</p>
 <p>林克点头，带着三人向西海岸出发。</p>
@@ -702,56 +701,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百六十六章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（奥兹玛篇·第三章）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-165.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-167.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-165.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-167.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-136.html" class="sidebar-chapter ">第136章：地轨中心</a>
 <a href="chapter-137.html" class="sidebar-chapter ">第137章：魔剑士阿斯兰</a>
 <a href="chapter-138.html" class="sidebar-chapter ">第138章：泪目之眼</a>
@@ -795,190 +800,211 @@
 <a href="chapter-176.html" class="sidebar-chapter ">第176章：篇章落幕</a>
 <a href="chapter-177.html" class="sidebar-chapter ">第177章：番外·米歇尔的最后祝福</a>
 <a href="chapter-178.html" class="sidebar-chapter ">第178章：番外·奥兹玛的遗言</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(166)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(166)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-167.html b/alacarte-novel-website/chapters/chapter-167.html
index 362730f..e6c9045 100644
--- a/alacarte-novel-website/chapters/chapter-167.html
+++ b/alacarte-novel-website/chapters/chapter-167.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>黑色大地入口 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 167</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>黑色大地入口 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 167</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>西北方向，阿拉德大陆的边境地带。</p>
 <p>这里的景色逐渐变得荒凉。枯黄的草地、干涸的河床、被风蚀的岩石...一切都在诉说着这片土地的贫瘠。</p>
 <p>"就是这里吗？"敏泰问。</p>
@@ -671,56 +670,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百六十七章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（奥兹玛篇·第四章）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-166.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-168.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-166.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-168.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-137.html" class="sidebar-chapter ">第137章：魔剑士阿斯兰</a>
 <a href="chapter-138.html" class="sidebar-chapter ">第138章：泪目之眼</a>
 <a href="chapter-139.html" class="sidebar-chapter ">第139章：使徒会晤</a>
@@ -763,190 +768,211 @@
 <a href="chapter-176.html" class="sidebar-chapter ">第176章：篇章落幕</a>
 <a href="chapter-177.html" class="sidebar-chapter ">第177章：番外·米歇尔的最后祝福</a>
 <a href="chapter-178.html" class="sidebar-chapter ">第178章：番外·奥兹玛的遗言</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(167)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(167)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-168.html b/alacarte-novel-website/chapters/chapter-168.html
index 9ff760d..bd6f1ee 100644
--- a/alacarte-novel-website/chapters/chapter-168.html
+++ b/alacarte-novel-website/chapters/chapter-168.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>焦黑之地深入 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 168</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>焦黑之地深入 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 168</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>骑士的巨剑带着毁灭性的力量斩下，林克用光剑格挡。</p>
 <p>当！</p>
 <p>两把武器碰撞，爆发出刺目的火花。</p>
@@ -673,56 +672,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百六十八章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（奥兹玛篇·第五章）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-167.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-169.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-167.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-169.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-138.html" class="sidebar-chapter ">第138章：泪目之眼</a>
 <a href="chapter-139.html" class="sidebar-chapter ">第139章：使徒会晤</a>
 <a href="chapter-140.html" class="sidebar-chapter ">第140章：复仇之剑</a>
@@ -764,190 +769,211 @@
 <a href="chapter-176.html" class="sidebar-chapter ">第176章：篇章落幕</a>
 <a href="chapter-177.html" class="sidebar-chapter ">第177章：番外·米歇尔的最后祝福</a>
 <a href="chapter-178.html" class="sidebar-chapter ">第178章：番外·奥兹玛的遗言</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(168)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(168)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-169.html b/alacarte-novel-website/chapters/chapter-169.html
index ad9ea1f..29cb1a1 100644
--- a/alacarte-novel-website/chapters/chapter-169.html
+++ b/alacarte-novel-website/chapters/chapter-169.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>暗黑骑士团 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 169</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>暗黑骑士团 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 169</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>三个骑士同时发动攻击，空气中充满了压抑的气息。</p>
 <p>泰玛特的镰刀带着绝望的气息斩来，那股力量仿佛能吞噬一切希望。</p>
 <p>贝利亚斯的巨剑劈向林克的头顶，力量足以粉碎岩石，让大地颤抖。</p>
@@ -676,56 +675,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百六十九章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（奥兹玛篇·第六章）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-168.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-170.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-168.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-170.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-139.html" class="sidebar-chapter ">第139章：使徒会晤</a>
 <a href="chapter-140.html" class="sidebar-chapter ">第140章：复仇之剑</a>
 <a href="chapter-141.html" class="sidebar-chapter ">第141章：寂静城再访</a>
@@ -766,190 +771,211 @@
 <a href="chapter-176.html" class="sidebar-chapter ">第176章：篇章落幕</a>
 <a href="chapter-177.html" class="sidebar-chapter ">第177章：番外·米歇尔的最后祝福</a>
 <a href="chapter-178.html" class="sidebar-chapter ">第178章：番外·奥兹玛的遗言</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(169)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(169)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-17.html b/alacarte-novel-website/chapters/chapter-17.html
index 8ddb324..fa5c192 100644
--- a/alacarte-novel-website/chapters/chapter-17.html
+++ b/alacarte-novel-website/chapters/chapter-17.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>城主宫殿 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 17</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>城主宫殿 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 17</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>黑暗玄廊的尽头，是一扇巨大的石门。</p>
 <p>门上刻着天空之城的徽章——一只展翅的雄鹰，口中衔着发光的太阳。这是光之城主的标志，也是整个天空之城最高权力的象征。</p>
 <p>林克站在门前，感受着从门缝中渗出的强大魔力波动。</p>
@@ -712,56 +711,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第十七章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（天空之城篇 完结）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-16.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-18.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-16.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-18.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-1.html" class="sidebar-chapter ">第1章：洛兰的风</a>
 <a href="chapter-2.html" class="sidebar-chapter ">第2章：洛兰深处</a>
 <a href="chapter-3.html" class="sidebar-chapter ">第3章：幽暗密林</a>
@@ -809,190 +814,211 @@
 <a href="chapter-45.html" class="sidebar-chapter ">第45章：冰雪宫殿</a>
 <a href="chapter-46.html" class="sidebar-chapter ">第46章：布万加修炼场</a>
 <a href="chapter-47.html" class="sidebar-chapter ">第47章：斯卡萨之巢·龙威</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(17)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(17)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-170.html b/alacarte-novel-website/chapters/chapter-170.html
index a64b9a3..2e6a4eb 100644
--- a/alacarte-novel-website/chapters/chapter-170.html
+++ b/alacarte-novel-website/chapters/chapter-170.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>黑暗中的记忆 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 170</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>黑暗中的记忆 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 170</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>林克正要走向奥兹玛，周围突然涌起一阵浓重的黑暗。</p>
 <p>奥兹玛的身影消失在黑暗中，取而代之的是一片模糊的画面。</p>
 <p>"这是...什么？"敏泰惊讶地问。</p>
@@ -677,56 +676,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百七十章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（奥兹玛篇·第七章）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-169.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-171.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-169.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-171.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-140.html" class="sidebar-chapter ">第140章：复仇之剑</a>
 <a href="chapter-141.html" class="sidebar-chapter ">第141章：寂静城再访</a>
 <a href="chapter-142.html" class="sidebar-chapter ">第142章：时间之钥</a>
@@ -766,190 +771,211 @@
 <a href="chapter-176.html" class="sidebar-chapter ">第176章：篇章落幕</a>
 <a href="chapter-177.html" class="sidebar-chapter ">第177章：番外·米歇尔的最后祝福</a>
 <a href="chapter-178.html" class="sidebar-chapter ">第178章：番外·奥兹玛的遗言</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(170)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(170)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-171.html b/alacarte-novel-website/chapters/chapter-171.html
index bea461c..0e8fe6c 100644
--- a/alacarte-novel-website/chapters/chapter-171.html
+++ b/alacarte-novel-website/chapters/chapter-171.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>混沌王座 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 171</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>混沌王座 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 171</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>林克一行人穿过黑暗的走廊，来到了一片开阔的空间。</p>
 <p>这里的景象让人窒息。</p>
 <p>天空是血红色的，布满了扭曲的裂缝。大地是焦黑的，不断有黑烟从裂缝中涌出。空气中弥漫着死亡的气息，每呼吸一口都像是在吸入诅咒。</p>
@@ -827,56 +826,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百七十一章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（奥兹玛篇·第八章）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-170.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-172.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-170.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-172.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-141.html" class="sidebar-chapter ">第141章：寂静城再访</a>
 <a href="chapter-142.html" class="sidebar-chapter ">第142章：时间之钥</a>
 <a href="chapter-143.html" class="sidebar-chapter ">第143章：翡翠梦魇</a>
@@ -915,190 +920,211 @@
 <a href="chapter-176.html" class="sidebar-chapter ">第176章：篇章落幕</a>
 <a href="chapter-177.html" class="sidebar-chapter ">第177章：番外·米歇尔的最后祝福</a>
 <a href="chapter-178.html" class="sidebar-chapter ">第178章：番外·奥兹玛的遗言</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(171)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(171)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-172.html b/alacarte-novel-website/chapters/chapter-172.html
index 16a9413..5524ba4 100644
--- a/alacarte-novel-website/chapters/chapter-172.html
+++ b/alacarte-novel-website/chapters/chapter-172.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>混沌之神的力量 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 172</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>混沌之神的力量 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 172</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>奥兹玛站在混沌王座前，他的身体散发黑色光芒。</p>
 <p>"让我展示...真正的混沌。"</p>
 <p>他伸出手，空间开始扭曲。</p>
@@ -752,56 +751,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百七十二章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（奥兹玛篇·第九章）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-171.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-173.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-171.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-173.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-142.html" class="sidebar-chapter ">第142章：时间之钥</a>
 <a href="chapter-143.html" class="sidebar-chapter ">第143章：翡翠梦魇</a>
 <a href="chapter-144.html" class="sidebar-chapter ">第144章：诅咒的守护者</a>
@@ -839,190 +844,211 @@
 <a href="chapter-176.html" class="sidebar-chapter ">第176章：篇章落幕</a>
 <a href="chapter-177.html" class="sidebar-chapter ">第177章：番外·米歇尔的最后祝福</a>
 <a href="chapter-178.html" class="sidebar-chapter ">第178章：番外·奥兹玛的遗言</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(172)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(172)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-173.html b/alacarte-novel-website/chapters/chapter-173.html
index 4801954..b02a596 100644
--- a/alacarte-novel-website/chapters/chapter-173.html
+++ b/alacarte-novel-website/chapters/chapter-173.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>米歇尔的羁绊 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 173</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>米歇尔的羁绊 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 173</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>战斗暂时停止。</p>
 <p>米歇尔站在奥兹玛面前，金色的神圣之力稳定周围的空间。</p>
 <p>"奥兹玛，让我告诉你...我们最后的对话。"</p>
@@ -773,56 +772,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百七十三章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（奥兹玛篇·第十章）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-172.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-174.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-172.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-174.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-143.html" class="sidebar-chapter ">第143章：翡翠梦魇</a>
 <a href="chapter-144.html" class="sidebar-chapter ">第144章：诅咒的守护者</a>
 <a href="chapter-145.html" class="sidebar-chapter ">第145章：精灵的誓言</a>
@@ -859,190 +864,211 @@
 <a href="chapter-176.html" class="sidebar-chapter ">第176章：篇章落幕</a>
 <a href="chapter-177.html" class="sidebar-chapter ">第177章：番外·米歇尔的最后祝福</a>
 <a href="chapter-178.html" class="sidebar-chapter ">第178章：番外·奥兹玛的遗言</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(173)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(173)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-174.html b/alacarte-novel-website/chapters/chapter-174.html
index 5571aa2..e8476d0 100644
--- a/alacarte-novel-website/chapters/chapter-174.html
+++ b/alacarte-novel-website/chapters/chapter-174.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>创世之光的净化 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 174</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>创世之光的净化 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 174</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>林克站在奥兹玛面前，金色的光芒笼罩他的身体。</p>
 <p>创世之力与神圣之力融合，力量达到前所未有的强度。</p>
 <p>他感受到体内创世之力碎片的融合。</p>
@@ -768,56 +767,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百七十四章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（奥兹玛篇·第十一章）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-173.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-175.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-173.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-175.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-144.html" class="sidebar-chapter ">第144章：诅咒的守护者</a>
 <a href="chapter-145.html" class="sidebar-chapter ">第145章：精灵的誓言</a>
 <a href="chapter-146.html" class="sidebar-chapter ">第146章：深渊之眼</a>
@@ -853,190 +858,211 @@
 <a href="chapter-176.html" class="sidebar-chapter ">第176章：篇章落幕</a>
 <a href="chapter-177.html" class="sidebar-chapter ">第177章：番外·米歇尔的最后祝福</a>
 <a href="chapter-178.html" class="sidebar-chapter ">第178章：番外·奥兹玛的遗言</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(174)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(174)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-175.html b/alacarte-novel-website/chapters/chapter-175.html
index 5db51e3..583d4e7 100644
--- a/alacarte-novel-website/chapters/chapter-175.html
+++ b/alacarte-novel-website/chapters/chapter-175.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>混沌的终结 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 175</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>混沌的终结 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 175</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>林克一行人走出黑色大地的深处。</p>
 <p>周围的景象让人惊讶。</p>
 <p>曾经的焦黑大地，现在开始恢复生机。</p>
@@ -761,56 +760,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百七十五章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（奥兹玛篇·第十二章）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-174.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-176.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-174.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-176.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-145.html" class="sidebar-chapter ">第145章：精灵的誓言</a>
 <a href="chapter-146.html" class="sidebar-chapter ">第146章：深渊之眼</a>
 <a href="chapter-147.html" class="sidebar-chapter ">第147章：赫尔德的仪式</a>
@@ -845,190 +850,211 @@
 <a href="chapter-176.html" class="sidebar-chapter ">第176章：篇章落幕</a>
 <a href="chapter-177.html" class="sidebar-chapter ">第177章：番外·米歇尔的最后祝福</a>
 <a href="chapter-178.html" class="sidebar-chapter ">第178章：番外·奥兹玛的遗言</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(175)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(175)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-176.html b/alacarte-novel-website/chapters/chapter-176.html
index 82413a2..8e7ad90 100644
--- a/alacarte-novel-website/chapters/chapter-176.html
+++ b/alacarte-novel-website/chapters/chapter-176.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>篇章落幕 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 176</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>篇章落幕 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 176</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>林克一行人回到赛丽亚旅馆。</p>
 <p>赛丽亚迎接他们："林克！你们回来了！"</p>
 <p>她的眼中充满担忧和期待。</p>
@@ -760,56 +759,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百七十六章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（奥兹玛篇·终章）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-175.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-177.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-175.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-177.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-146.html" class="sidebar-chapter ">第146章：深渊之眼</a>
 <a href="chapter-147.html" class="sidebar-chapter ">第147章：赫尔德的仪式</a>
 <a href="chapter-148.html" class="sidebar-chapter ">第148章：战后余晖</a>
@@ -843,190 +848,211 @@
 <a href="chapter-176.html" class="sidebar-chapter current">第176章：篇章落幕</a>
 <a href="chapter-177.html" class="sidebar-chapter ">第177章：番外·米歇尔的最后祝福</a>
 <a href="chapter-178.html" class="sidebar-chapter ">第178章：番外·奥兹玛的遗言</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(176)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(176)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-177.html b/alacarte-novel-website/chapters/chapter-177.html
index 6ebc34a..2790056 100644
--- a/alacarte-novel-website/chapters/chapter-177.html
+++ b/alacarte-novel-website/chapters/chapter-177.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>番外·米歇尔的最后祝福 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 177</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>番外·米歇尔的最后祝福 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 177</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>在林克离开圣职者教团后。</p>
 <p>教团内部发生了一件大事。</p>
 <p>米歇尔的分身彻底消散，他的灵魂前往神界。</p>
@@ -749,56 +748,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百七十七章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（番外·米歇尔的最后祝福）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-176.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-178.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-176.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-178.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-147.html" class="sidebar-chapter ">第147章：赫尔德的仪式</a>
 <a href="chapter-148.html" class="sidebar-chapter ">第148章：战后余晖</a>
 <a href="chapter-149.html" class="sidebar-chapter ">第149章：泰波尔斯的召唤</a>
@@ -831,190 +836,211 @@
 <a href="chapter-176.html" class="sidebar-chapter ">第176章：篇章落幕</a>
 <a href="chapter-177.html" class="sidebar-chapter current">第177章：番外·米歇尔的最后祝福</a>
 <a href="chapter-178.html" class="sidebar-chapter ">第178章：番外·奥兹玛的遗言</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(177)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(177)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-178.html b/alacarte-novel-website/chapters/chapter-178.html
index a95f0ae..0b9104e 100644
--- a/alacarte-novel-website/chapters/chapter-178.html
+++ b/alacarte-novel-website/chapters/chapter-178.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>番外·奥兹玛的遗言 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 178</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>番外·奥兹玛的遗言 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 178</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>在神界。</p>
 <p>奥兹玛的灵魂终于解脱。</p>
 <p>他与米歇尔、莉兹团聚。</p>
@@ -815,56 +814,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第一百七十八章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（番外·奥兹玛的遗言）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（奥兹玛篇·完结）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-177.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-179.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-177.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-179.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-148.html" class="sidebar-chapter ">第148章：战后余晖</a>
 <a href="chapter-149.html" class="sidebar-chapter ">第149章：泰波尔斯的召唤</a>
 <a href="chapter-150.html" class="sidebar-chapter ">第150章：天空之城</a>
@@ -896,190 +901,211 @@
 <a href="chapter-176.html" class="sidebar-chapter ">第176章：篇章落幕</a>
 <a href="chapter-177.html" class="sidebar-chapter ">第177章：番外·米歇尔的最后祝福</a>
 <a href="chapter-178.html" class="sidebar-chapter current">第178章：番外·奥兹玛的遗言</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(178)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(178)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-18.html b/alacarte-novel-website/chapters/chapter-18.html
index 0e429fd..6a1f792 100644
--- a/alacarte-novel-website/chapters/chapter-18.html
+++ b/alacarte-novel-website/chapters/chapter-18.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>番外·悬空城 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 18</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>番外·悬空城 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 18</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>天空之城重新开放的消息，很快传遍了整个阿拉德大陆。</p>
 <p>冒险家们从各地涌来，想要探索这座传说中的浮空城市。而林克和赛丽亚，作为"晨曦的继承者"，自然成为了众人关注的焦点。</p>
 <p>但林克的心情并不轻松。</p>
@@ -666,56 +665,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第十八章：番外·悬空城 完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（天空之城篇 正式完结）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-17.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-19.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-17.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-19.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-1.html" class="sidebar-chapter ">第1章：洛兰的风</a>
 <a href="chapter-2.html" class="sidebar-chapter ">第2章：洛兰深处</a>
 <a href="chapter-3.html" class="sidebar-chapter ">第3章：幽暗密林</a>
@@ -764,190 +769,211 @@
 <a href="chapter-46.html" class="sidebar-chapter ">第46章：布万加修炼场</a>
 <a href="chapter-47.html" class="sidebar-chapter ">第47章：斯卡萨之巢·龙威</a>
 <a href="chapter-48.html" class="sidebar-chapter ">第48章：斯卡萨之巢·龙陨</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(18)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(18)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-19.html b/alacarte-novel-website/chapters/chapter-19.html
index 6516ea4..95c6de2 100644
--- a/alacarte-novel-website/chapters/chapter-19.html
+++ b/alacarte-novel-website/chapters/chapter-19.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>天帷巨兽·神殿外围 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 19</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>天帷巨兽·神殿外围 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 19</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>天空之城重新开放后，林克和赛丽亚在赫顿玛尔休整了几天。</p>
 <p>晨曦恢复了三成光芒，虽然还不如巅峰时期，但已经能够正常使用光属性攻击。这对于即将面临的新挑战来说，无疑是个好消息。</p>
 <p>"接下来去哪？"赛丽亚一边整理装备一边问道。</p>
@@ -679,56 +678,62 @@
 <p>天帷巨兽篇的冒险，才刚刚开始。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第十八章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-18.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-20.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-18.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-20.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-1.html" class="sidebar-chapter ">第1章：洛兰的风</a>
 <a href="chapter-2.html" class="sidebar-chapter ">第2章：洛兰深处</a>
 <a href="chapter-3.html" class="sidebar-chapter ">第3章：幽暗密林</a>
@@ -778,190 +783,211 @@
 <a href="chapter-47.html" class="sidebar-chapter ">第47章：斯卡萨之巢·龙威</a>
 <a href="chapter-48.html" class="sidebar-chapter ">第48章：斯卡萨之巢·龙陨</a>
 <a href="chapter-49.html" class="sidebar-chapter ">第49章：重返赫顿玛尔</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(19)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(19)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-20.html b/alacarte-novel-website/chapters/chapter-20.html
index e161baa..c63fa8b 100644
--- a/alacarte-novel-website/chapters/chapter-20.html
+++ b/alacarte-novel-website/chapters/chapter-20.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>树精丛林 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 20</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>树精丛林 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 20</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>离开神殿外围，林克一行人进入了天帷巨兽的更深区域。</p>
 <p>与神殿的宏伟建筑不同，这里是一片原始森林。巨大的树木遮天蔽日，藤蔓如同巨蛇般缠绕在树干之间，空气中弥漫着潮湿腐朽的气息。</p>
 <p>"这里就是……树精丛林？"赛丽亚环顾四周，眉头微皱。</p>
@@ -647,56 +646,62 @@
 <p>"罗特斯……必须被阻止。"</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第二十章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-19.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-21.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-19.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-21.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-1.html" class="sidebar-chapter ">第1章：洛兰的风</a>
 <a href="chapter-2.html" class="sidebar-chapter ">第2章：洛兰深处</a>
 <a href="chapter-3.html" class="sidebar-chapter ">第3章：幽暗密林</a>
@@ -747,190 +752,211 @@
 <a href="chapter-48.html" class="sidebar-chapter ">第48章：斯卡萨之巢·龙陨</a>
 <a href="chapter-49.html" class="sidebar-chapter ">第49章：重返赫顿玛尔</a>
 <a href="chapter-50.html" class="sidebar-chapter ">第50章：诺斯玛尔·盗贼团</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(20)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(20)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-21.html b/alacarte-novel-website/chapters/chapter-21.html
index 3e97c32..fe80f1d 100644
--- a/alacarte-novel-website/chapters/chapter-21.html
+++ b/alacarte-novel-website/chapters/chapter-21.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>炼狱 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 21</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>炼狱 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 21</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>离开树精丛林的地下实验室，林克一行人继续向天帷巨兽的深处进发。</p>
 <p>周围的温度开始急剧上升。原本潮湿的丛林空气变得干燥炽热，每一步都让人感觉像是踏在火炉上。</p>
 <p>"好热……"赛丽亚擦着额头的汗水，"这里怎么会这么热？"</p>
@@ -651,56 +650,62 @@
 <p>"为了阻止罗特斯，为了结束这一切。"</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第二十一章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-20.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-22.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-20.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-22.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-1.html" class="sidebar-chapter ">第1章：洛兰的风</a>
 <a href="chapter-2.html" class="sidebar-chapter ">第2章：洛兰深处</a>
 <a href="chapter-3.html" class="sidebar-chapter ">第3章：幽暗密林</a>
@@ -752,190 +757,211 @@
 <a href="chapter-49.html" class="sidebar-chapter ">第49章：重返赫顿玛尔</a>
 <a href="chapter-50.html" class="sidebar-chapter ">第50章：诺斯玛尔·盗贼团</a>
 <a href="chapter-51.html" class="sidebar-chapter ">第51章：哈穆林·鼠患</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(21)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(21)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-22.html b/alacarte-novel-website/chapters/chapter-22.html
index 02e2808..6973f24 100644
--- a/alacarte-novel-website/chapters/chapter-22.html
+++ b/alacarte-novel-website/chapters/chapter-22.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>西海岸的闲暇 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 22</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>西海岸的闲暇 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 22</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>从炼狱的高温地狱中脱身，林克一行人决定暂时返回西海岸休整。</p>
 <p>天帷巨兽的冒险比想象中更加凶险，连续的战斗让每个人都身心俱疲。更重要的是，林克感觉到自己即将迎来一次突破——那种剑士在突破瓶颈前特有的预感。</p>
 <p>"我们需要准备更充分。"林克对赛丽亚说，"接下来的极昼区域，罗特斯的力量会更强。"</p>
@@ -658,56 +657,62 @@
 <p>为了赛丽亚，为了阻止罗特斯，为了守护这个世界。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第二十二章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-21.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-23.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-21.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-23.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-1.html" class="sidebar-chapter ">第1章：洛兰的风</a>
 <a href="chapter-2.html" class="sidebar-chapter ">第2章：洛兰深处</a>
 <a href="chapter-3.html" class="sidebar-chapter ">第3章：幽暗密林</a>
@@ -760,190 +765,211 @@
 <a href="chapter-50.html" class="sidebar-chapter ">第50章：诺斯玛尔·盗贼团</a>
 <a href="chapter-51.html" class="sidebar-chapter ">第51章：哈穆林·鼠患</a>
 <a href="chapter-52.html" class="sidebar-chapter ">第52章：月光酒馆·寻找阿甘左</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(22)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(22)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-23.html b/alacarte-novel-website/chapters/chapter-23.html
index f5be7b9..9757b8e 100644
--- a/alacarte-novel-website/chapters/chapter-23.html
+++ b/alacarte-novel-website/chapters/chapter-23.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>极昼 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 23</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>极昼 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 23</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>离开炼狱，林克一行人沿着通道向上攀登。</p>
 <p>周围的温度开始下降，但空气中弥漫的精神压迫感却越来越强。每向上走一步，赛丽亚的脸色就苍白一分。</p>
 <p>"赛丽亚，你还好吗？"林克注意到她的异常。</p>
@@ -677,56 +676,62 @@
 <p>"为了赛丽亚，为了阻止罗特斯，为了守护这个世界。"</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第二十三章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-22.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-24.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-22.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-24.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-1.html" class="sidebar-chapter ">第1章：洛兰的风</a>
 <a href="chapter-2.html" class="sidebar-chapter ">第2章：洛兰深处</a>
 <a href="chapter-3.html" class="sidebar-chapter ">第3章：幽暗密林</a>
@@ -780,190 +785,211 @@
 <a href="chapter-51.html" class="sidebar-chapter ">第51章：哈穆林·鼠患</a>
 <a href="chapter-52.html" class="sidebar-chapter ">第52章：月光酒馆·寻找阿甘左</a>
 <a href="chapter-53.html" class="sidebar-chapter ">第53章：番外·帕丽丝的誓言</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(23)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(23)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-24.html b/alacarte-novel-website/chapters/chapter-24.html
index d3a4851..60401ad 100644
--- a/alacarte-novel-website/chapters/chapter-24.html
+++ b/alacarte-novel-website/chapters/chapter-24.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>第一脊椎 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 24</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>第一脊椎 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 24</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>离开极昼，林克和奥菲利亚沿着通道向下深入。</p>
 <p>与极昼明亮的露天平台不同，第一脊椎是一个阴暗潮湿的地下洞穴。空气中弥漫着海水的咸腥味，墙壁上到处都是黏糊糊的液体，脚下不时传来"咯吱咯吱"的声响——那是踩碎了什么东西的声音。</p>
 <p>"这里是……第一脊椎？"林克皱眉。</p>
@@ -708,56 +707,62 @@
 <p>真正的最终战斗，还在等待着他们。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第二十四章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-23.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-25.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-23.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-25.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-1.html" class="sidebar-chapter ">第1章：洛兰的风</a>
 <a href="chapter-2.html" class="sidebar-chapter ">第2章：洛兰深处</a>
 <a href="chapter-3.html" class="sidebar-chapter ">第3章：幽暗密林</a>
@@ -812,190 +817,211 @@
 <a href="chapter-52.html" class="sidebar-chapter ">第52章：月光酒馆·寻找阿甘左</a>
 <a href="chapter-53.html" class="sidebar-chapter ">第53章：番外·帕丽丝的誓言</a>
 <a href="chapter-54.html" class="sidebar-chapter ">第54章：觉醒之路·启程</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(24)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(24)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-25.html b/alacarte-novel-website/chapters/chapter-25.html
index ba71993..20a8890 100644
--- a/alacarte-novel-website/chapters/chapter-25.html
+++ b/alacarte-novel-website/chapters/chapter-25.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>赫顿玛尔的准备 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 25</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>赫顿玛尔的准备 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 25</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>从第一脊椎返回，林克、艾伦和奥菲利亚马不停蹄地赶往赫顿玛尔。</p>
 <p>第二脊椎就在前方，罗特斯——第八使徒，正盘踞在那里。但他们都知道，以现在的状态前往，无异于送死。</p>
 <p>"罗特斯的精神控制能力太强了。"艾伦面色凝重，"即使是圣骑士，在没有准备的情况下也会被控制。"</p>
@@ -625,56 +624,62 @@
 <p>"为了赛丽亚，为了所有被使徒伤害的人，我一定会击败你。"</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第二十五章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-24.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-26.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-24.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-26.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-1.html" class="sidebar-chapter ">第1章：洛兰的风</a>
 <a href="chapter-2.html" class="sidebar-chapter ">第2章：洛兰深处</a>
 <a href="chapter-3.html" class="sidebar-chapter ">第3章：幽暗密林</a>
@@ -730,190 +735,211 @@
 <a href="chapter-53.html" class="sidebar-chapter ">第53章：番外·帕丽丝的誓言</a>
 <a href="chapter-54.html" class="sidebar-chapter ">第54章：觉醒之路·启程</a>
 <a href="chapter-55.html" class="sidebar-chapter ">第55章：比尔马克帝国试验场</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(25)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(25)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-26.html b/alacarte-novel-website/chapters/chapter-26.html
index 0d46c3c..a7815b8 100644
--- a/alacarte-novel-website/chapters/chapter-26.html
+++ b/alacarte-novel-website/chapters/chapter-26.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>第二脊椎 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 26</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>第二脊椎 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 26</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>第二脊椎，天帷巨兽的最深处。</p>
 <p>这里是使徒罗特斯的巢穴，也是天帷巨兽篇的最终战场。</p>
 <p>林克、艾伦、奥菲利亚和维加四人站在通往BOSS房间的入口前。每个人的表情都无比凝重。</p>
@@ -703,56 +702,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第二十六章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（天帷巨兽篇 完结）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-25.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-27.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-25.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-27.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-1.html" class="sidebar-chapter ">第1章：洛兰的风</a>
 <a href="chapter-2.html" class="sidebar-chapter ">第2章：洛兰深处</a>
 <a href="chapter-3.html" class="sidebar-chapter ">第3章：幽暗密林</a>
@@ -809,190 +814,211 @@
 <a href="chapter-54.html" class="sidebar-chapter ">第54章：觉醒之路·启程</a>
 <a href="chapter-55.html" class="sidebar-chapter ">第55章：比尔马克帝国试验场</a>
 <a href="chapter-56.html" class="sidebar-chapter ">第56章：王的遗迹·远古五骑士</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(26)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(26)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-27.html b/alacarte-novel-website/chapters/chapter-27.html
index c95c166..19f1d79 100644
--- a/alacarte-novel-website/chapters/chapter-27.html
+++ b/alacarte-novel-website/chapters/chapter-27.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>重逢的温柔 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 27</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>重逢的温柔 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 27</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>西海岸的黄昏，是金色的。</p>
 <p>夕阳的余晖洒在港口的石板路上，给这座海边城市披上了一层温暖的光晕。海风带着咸湿的气息，轻轻拂过行人的脸庞。</p>
 <p>林克站在"月光酒馆"的门口，深吸了一口气。</p>
@@ -636,56 +635,62 @@
 <p>冒险，还将继续。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第二十七章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-26.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-28.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-26.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-28.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-1.html" class="sidebar-chapter ">第1章：洛兰的风</a>
 <a href="chapter-2.html" class="sidebar-chapter ">第2章：洛兰深处</a>
 <a href="chapter-3.html" class="sidebar-chapter ">第3章：幽暗密林</a>
@@ -743,190 +748,211 @@
 <a href="chapter-55.html" class="sidebar-chapter ">第55章：比尔马克帝国试验场</a>
 <a href="chapter-56.html" class="sidebar-chapter ">第56章：王的遗迹·远古五骑士</a>
 <a href="chapter-57.html" class="sidebar-chapter ">第57章：心灵试炼·剑圣觉醒</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(27)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(27)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-28.html b/alacarte-novel-website/chapters/chapter-28.html
index f8f9d5f..4e5c35b 100644
--- a/alacarte-novel-website/chapters/chapter-28.html
+++ b/alacarte-novel-website/chapters/chapter-28.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>暗精灵的委托 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 28</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>暗精灵的委托 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 28</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>清晨的阳光透过窗帘的缝隙洒进房间，在地板上投下斑驳的光影。</p>
 <p>林克睁开眼睛，发现自己怀中还抱着一个温软的身躯。</p>
 <p>赛丽亚还在熟睡，她的脸颊贴着他的胸膛，嘴角带着一丝满足的微笑。阳光照在她金色的长发上，像是镀了一层淡淡的光晕。</p>
@@ -663,56 +662,62 @@
 <p>林克叹了口气，感到未来的道路似乎比想象中更加……有趣。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第二十八章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-27.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-29.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-27.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-29.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-1.html" class="sidebar-chapter ">第1章：洛兰的风</a>
 <a href="chapter-2.html" class="sidebar-chapter ">第2章：洛兰深处</a>
 <a href="chapter-3.html" class="sidebar-chapter ">第3章：幽暗密林</a>
@@ -771,190 +776,211 @@
 <a href="chapter-56.html" class="sidebar-chapter ">第56章：王的遗迹·远古五骑士</a>
 <a href="chapter-57.html" class="sidebar-chapter ">第57章：心灵试炼·剑圣觉醒</a>
 <a href="chapter-58.html" class="sidebar-chapter ">第58章：番外·后宫的温馨</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(28)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(28)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-29.html b/alacarte-novel-website/chapters/chapter-29.html
index 81b71ac..f0e9d9d 100644
--- a/alacarte-novel-website/chapters/chapter-29.html
+++ b/alacarte-novel-website/chapters/chapter-29.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>阿法利亚营地 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 29</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>阿法利亚营地 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 29</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>阿法利亚营地坐落在高山之巅。</p>
 <p>这里是贝尔玛尔公国在边境设立的重要据点，也是通往暗黑城的必经之路。营地周围云雾缭绕，远处的山脉如同巨龙般蜿蜒起伏。</p>
 <p>林克一行人抵达时，正值黄昏时分。夕阳将营地染成一片金红色，士兵们在营地中来回巡逻，气氛紧张而肃穆。</p>
@@ -632,56 +631,62 @@
 <p>暗黑城的冒险，正式开始了。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第二十九章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-28.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-30.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-28.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-30.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-1.html" class="sidebar-chapter ">第1章：洛兰的风</a>
 <a href="chapter-2.html" class="sidebar-chapter ">第2章：洛兰深处</a>
 <a href="chapter-3.html" class="sidebar-chapter ">第3章：幽暗密林</a>
@@ -741,190 +746,211 @@
 <a href="chapter-57.html" class="sidebar-chapter ">第57章：心灵试炼·剑圣觉醒</a>
 <a href="chapter-58.html" class="sidebar-chapter ">第58章：番外·后宫的温馨</a>
 <a href="chapter-59.html" class="sidebar-chapter ">第59章：敏泰的思念</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(29)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(29)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-30.html b/alacarte-novel-website/chapters/chapter-30.html
index 89412c5..7ffbfd3 100644
--- a/alacarte-novel-website/chapters/chapter-30.html
+++ b/alacarte-novel-website/chapters/chapter-30.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>浅栖之地 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 30</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>浅栖之地 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 30</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>诺伊佩拉地区笼罩在一片灰蒙蒙的雾气中。</p>
 <p>这里曾经是暗精灵繁荣的领地，如今却变成了死寂的废墟。空气中弥漫着腐朽和疾病的气息，让人作呕。</p>
 <p>林克一行人沿着克伦特提供的地图，来到了浅栖之地的入口。那是一个巨大的地下洞穴，黑漆漆的洞口像是巨兽的嘴巴，等待着吞噬一切进入其中的生命。</p>
@@ -660,56 +659,62 @@
 <p>也许，这就是后宫的奥义吧。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第三十章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-29.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-31.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-29.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-31.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-1.html" class="sidebar-chapter ">第1章：洛兰的风</a>
 <a href="chapter-2.html" class="sidebar-chapter ">第2章：洛兰深处</a>
 <a href="chapter-3.html" class="sidebar-chapter ">第3章：幽暗密林</a>
@@ -770,190 +775,211 @@
 <a href="chapter-58.html" class="sidebar-chapter ">第58章：番外·后宫的温馨</a>
 <a href="chapter-59.html" class="sidebar-chapter ">第59章：敏泰的思念</a>
 <a href="chapter-60.html" class="sidebar-chapter ">第60章：敏泰加入·前往诺伊佩拉</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(30)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(30)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-31.html b/alacarte-novel-website/chapters/chapter-31.html
index ae885c2..5126ba9 100644
--- a/alacarte-novel-website/chapters/chapter-31.html
+++ b/alacarte-novel-website/chapters/chapter-31.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>蜘蛛洞穴 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 31</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>蜘蛛洞穴 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 31</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>从浅栖之地返回阿法利亚营地后，林克将摩根的笔记交给了克伦特。</p>
 <p>"夏普伦……"克伦特看着笔记上的名字，脸色变得铁青，"果然是他。我早就怀疑他了。"</p>
 <p>"我们现在该怎么办？"林克问。</p>
@@ -654,56 +653,62 @@
 <p>邪龙斯皮兹的封印，还在等待着他们去加固。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第三十一章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-30.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-32.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-30.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-32.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-1.html" class="sidebar-chapter ">第1章：洛兰的风</a>
 <a href="chapter-2.html" class="sidebar-chapter ">第2章：洛兰深处</a>
 <a href="chapter-3.html" class="sidebar-chapter ">第3章：幽暗密林</a>
@@ -765,190 +770,211 @@
 <a href="chapter-59.html" class="sidebar-chapter ">第59章：敏泰的思念</a>
 <a href="chapter-60.html" class="sidebar-chapter ">第60章：敏泰加入·前往诺伊佩拉</a>
 <a href="chapter-61.html" class="sidebar-chapter ">第61章：悲鸣洞穴·阿甘左与卢克西</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(31)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(31)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-32.html b/alacarte-novel-website/chapters/chapter-32.html
index 1b3ccb3..a561ae4 100644
--- a/alacarte-novel-website/chapters/chapter-32.html
+++ b/alacarte-novel-website/chapters/chapter-32.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>克伦特的委托 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 32</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>克伦特的委托 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 32</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>从蜘蛛洞穴返回阿法利亚营地后，林克三人受到了克伦特的热情接待。</p>
 <p>"干得漂亮！"克伦特拍了拍林克的肩膀，"艾克洛索一直是我们的心腹大患，你们解决了它，通往暗精灵墓地的道路就畅通了。"</p>
 <p>赛丽亚将收集到的毒囊交给克伦特："这些是给炼金术师的素材。"</p>
@@ -578,56 +577,62 @@
 <p>月光洒在三人身上，篝火的光芒渐渐微弱。明天，他们将踏入暗精灵墓地，面对前所未有的挑战。</p>
 <p>但此刻，在这温暖的篝火旁，有彼此相伴，就足够了。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第三十二章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-31.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-33.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-31.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-33.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-2.html" class="sidebar-chapter ">第2章：洛兰深处</a>
 <a href="chapter-3.html" class="sidebar-chapter ">第3章：幽暗密林</a>
 <a href="chapter-4.html" class="sidebar-chapter ">第4章：幽暗密林深处</a>
@@ -689,190 +694,211 @@
 <a href="chapter-60.html" class="sidebar-chapter ">第60章：敏泰加入·前往诺伊佩拉</a>
 <a href="chapter-61.html" class="sidebar-chapter ">第61章：悲鸣洞穴·阿甘左与卢克西</a>
 <a href="chapter-62.html" class="sidebar-chapter ">第62章：战前准备·痛苦之村的情报</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(32)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(32)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-33.html b/alacarte-novel-website/chapters/chapter-33.html
index ef9dfea..4533186 100644
--- a/alacarte-novel-website/chapters/chapter-33.html
+++ b/alacarte-novel-website/chapters/chapter-33.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>暗精灵墓地·左翼守卫 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 33</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>暗精灵墓地·左翼守卫 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 33</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>暗精灵墓地比想象中更加阴森恐怖。</p>
 <p>这里是暗精灵王族的长眠之地，巨大的石棺整齐地排列在墓道两侧，每一具石棺上都刻着古老的符文。空气中弥漫着死亡的气息，让人不寒而栗。</p>
 <p>"这里就是暗精灵墓地……"赛丽亚紧紧抓着林克的手臂，声音有些颤抖，"感觉……比蜘蛛洞穴还要可怕。"</p>
@@ -673,56 +672,62 @@
 <p>有这样的两个女孩陪伴，他还有什么不满足的呢？</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第三十三章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-32.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-34.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-32.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-34.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-3.html" class="sidebar-chapter ">第3章：幽暗密林</a>
 <a href="chapter-4.html" class="sidebar-chapter ">第4章：幽暗密林深处</a>
 <a href="chapter-5.html" class="sidebar-chapter ">第5章：雷鸣废墟</a>
@@ -784,190 +789,211 @@
 <a href="chapter-61.html" class="sidebar-chapter ">第61章：悲鸣洞穴·阿甘左与卢克西</a>
 <a href="chapter-62.html" class="sidebar-chapter ">第62章：战前准备·痛苦之村的情报</a>
 <a href="chapter-63.html" class="sidebar-chapter ">第63章：痛苦之村列瑟芬·狄瑞吉的真身</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(33)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(33)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-34.html b/alacarte-novel-website/chapters/chapter-34.html
index 034a0f7..2c7e47b 100644
--- a/alacarte-novel-website/chapters/chapter-34.html
+++ b/alacarte-novel-website/chapters/chapter-34.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>暗精灵墓地·剩余三将军 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 34</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>暗精灵墓地·剩余三将军 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 34</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>四人简单用过早餐，便向暗精灵墓地的深处进发。</p>
 <p>"根据克伦特的描述，剩下的三位将军分别镇守在不同的方向。"林克展开简陋的地图，"右翼的冰冻将军库拉德，前爪的速度将军斯扎克，还有尾刺的剧毒将军骸德。"</p>
 <p>"让我用圣光感知一下。"艾伦闭上眼睛，金色的光芒在他周身流转，"右边有强烈的寒气，前面有极速的波动，后方...有死亡的气息。"</p>
@@ -638,56 +637,62 @@
 <p>奥菲利亚也点头，眼中满是坚定："我也是。"</p>
 <p>"那好。"林克深吸一口气，看向墓地最深处那扇被四把钥匙封印的巨门，"让我们去会会那个邪龙斯皮兹。"</p>
 <p>夕阳西下，三人的身影在墓碑间渐行渐远。暗精灵墓地的最终秘密，即将揭晓。</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-33.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-35.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-33.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-35.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-4.html" class="sidebar-chapter ">第4章：幽暗密林深处</a>
 <a href="chapter-5.html" class="sidebar-chapter ">第5章：雷鸣废墟</a>
 <a href="chapter-6.html" class="sidebar-chapter ">第6章：格拉卡</a>
@@ -749,190 +754,211 @@
 <a href="chapter-62.html" class="sidebar-chapter ">第62章：战前准备·痛苦之村的情报</a>
 <a href="chapter-63.html" class="sidebar-chapter ">第63章：痛苦之村列瑟芬·狄瑞吉的真身</a>
 <a href="chapter-64.html" class="sidebar-chapter ">第64章：胜利归来·赫顿玛尔的庆祝</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(34)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(34)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-35.html b/alacarte-novel-website/chapters/chapter-35.html
index 2c74713..8edab8f 100644
--- a/alacarte-novel-website/chapters/chapter-35.html
+++ b/alacarte-novel-website/chapters/chapter-35.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>邪龙斯皮兹 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 35</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>邪龙斯皮兹 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 35</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>四把钥匙在林克手中发出共鸣。</p>
 <p>红色的火焰、蓝色的冰冻、银色的速度、绿色的剧毒——四种力量交织在一起，形成一道璀璨的光柱，直冲墓地最深处那扇被诅咒的巨门。</p>
 <p>轰隆隆——</p>
@@ -655,56 +654,62 @@
 <p>暗精灵墓地的阴霾已经散去，新的冒险，正在前方等待着他们。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第三十五章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-34.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-36.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-34.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-36.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-5.html" class="sidebar-chapter ">第5章：雷鸣废墟</a>
 <a href="chapter-6.html" class="sidebar-chapter ">第6章：格拉卡</a>
 <a href="chapter-7.html" class="sidebar-chapter ">第7章：烈焰格拉卡</a>
@@ -766,190 +771,211 @@
 <a href="chapter-63.html" class="sidebar-chapter ">第63章：痛苦之村列瑟芬·狄瑞吉的真身</a>
 <a href="chapter-64.html" class="sidebar-chapter ">第64章：胜利归来·赫顿玛尔的庆祝</a>
 <a href="chapter-65.html" class="sidebar-chapter ">第65章：正宫的专属时光·赛丽亚的深情</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(35)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(35)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-36.html b/alacarte-novel-website/chapters/chapter-36.html
index 1de8bac..3b5acec 100644
--- a/alacarte-novel-website/chapters/chapter-36.html
+++ b/alacarte-novel-website/chapters/chapter-36.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>莎兰的探望 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 36</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>莎兰的探望 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 36</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>从暗精灵墓地归来后的第三天，林克一行人抵达了西海岸。</p>
 <p>相比阿法利亚营地的荒凉，西海岸的繁华让众人有种恍如隔世的感觉。港口的海风带着咸湿的气息，街道上人来人往，魔法师公会的尖塔在阳光下熠熠生辉。</p>
 <p>"终于回来了。"赛丽亚伸了个懒腰，精灵的敏锐让她第一时间感受到了空气中的魔力波动，"这里的魔法气息...让人感觉好安心。"</p>
@@ -617,56 +616,62 @@
 <p>这一夜，西海岸的魔法师公会里，有人在微笑，有人在安睡，也有人在期待着明天的冒险。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第三十六章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-35.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-37.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-35.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-37.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-6.html" class="sidebar-chapter ">第6章：格拉卡</a>
 <a href="chapter-7.html" class="sidebar-chapter ">第7章：烈焰格拉卡</a>
 <a href="chapter-8.html" class="sidebar-chapter ">第8章：冰霜幽暗密林</a>
@@ -728,190 +733,211 @@
 <a href="chapter-64.html" class="sidebar-chapter ">第64章：胜利归来·赫顿玛尔的庆祝</a>
 <a href="chapter-65.html" class="sidebar-chapter ">第65章：正宫的专属时光·赛丽亚的深情</a>
 <a href="chapter-66.html" class="sidebar-chapter ">第66章：番外·五人同床·后宫大被同眠</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(36)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(36)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-37.html b/alacarte-novel-website/chapters/chapter-37.html
index ce775ce..3bee6ee 100644
--- a/alacarte-novel-website/chapters/chapter-37.html
+++ b/alacarte-novel-website/chapters/chapter-37.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>暗影迷宫·影子剑士 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 37</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>暗影迷宫·影子剑士 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 37</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>在西海岸休整两日后，林克一行人收到了克伦特的紧急传讯。</p>
 <p>"暗影迷宫出现异常。"传讯卷轴上只有简短的一句话，但林克能感受到其中的凝重。</p>
 <p>暗影迷宫位于暗黑城深处，是暗精灵王国的禁地。传说中，那里关押着暗精灵历史上最危险的罪犯，也是暗精灵最强剑士——影子剑士刹影的沉眠之地。</p>
@@ -629,56 +628,62 @@
 <p>四人沿着来时的路返回，幽蓝色的火焰渐渐熄灭，暗影迷宫重新恢复了平静。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第三十七章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-36.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-38.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-36.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-38.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-7.html" class="sidebar-chapter ">第7章：烈焰格拉卡</a>
 <a href="chapter-8.html" class="sidebar-chapter ">第8章：冰霜幽暗密林</a>
 <a href="chapter-9.html" class="sidebar-chapter ">第9章：转职之路</a>
@@ -740,190 +745,211 @@
 <a href="chapter-65.html" class="sidebar-chapter ">第65章：正宫的专属时光·赛丽亚的深情</a>
 <a href="chapter-66.html" class="sidebar-chapter ">第66章：番外·五人同床·后宫大被同眠</a>
 <a href="chapter-67.html" class="sidebar-chapter ">第67章：热血八番街·火箭侠的阴谋</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(37)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(37)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-38.html b/alacarte-novel-website/chapters/chapter-38.html
index 8e66fdf..b6736e5 100644
--- a/alacarte-novel-website/chapters/chapter-38.html
+++ b/alacarte-novel-website/chapters/chapter-38.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>熔岩穴·泰坦之怒 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 38</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>熔岩穴·泰坦之怒 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 38</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>击败影子剑士刹影后的第三天，克伦特再次找到了林克一行人。</p>
 <p>这一次，他的脸色比之前更加凝重。</p>
 <p>"熔岩穴出事了。"克伦特开门见山，"那里的火山活动突然加剧，泰坦...那个怪物正在苏醒。"</p>
@@ -627,56 +626,62 @@
 <p>四人沿着来时的路返回，岩浆湖渐渐平静下来，熔岩穴重新恢复了沉寂。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第三十八章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-37.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-39.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-37.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-39.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-8.html" class="sidebar-chapter ">第8章：冰霜幽暗密林</a>
 <a href="chapter-9.html" class="sidebar-chapter ">第9章：转职之路</a>
 <a href="chapter-10.html" class="sidebar-chapter ">第10章：暗黑雷鸣废墟</a>
@@ -738,190 +743,211 @@
 <a href="chapter-66.html" class="sidebar-chapter ">第66章：番外·五人同床·后宫大被同眠</a>
 <a href="chapter-67.html" class="sidebar-chapter ">第67章：热血八番街·火箭侠的阴谋</a>
 <a href="chapter-68.html" class="sidebar-chapter ">第68章：绿都格罗兹尼·魔雷者莫纳亨</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(38)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(38)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-39.html b/alacarte-novel-website/chapters/chapter-39.html
index 7a26f48..7e5e384 100644
--- a/alacarte-novel-website/chapters/chapter-39.html
+++ b/alacarte-novel-website/chapters/chapter-39.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>暗黑城入口·无头骑士 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 39</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>暗黑城入口·无头骑士 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 39</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>击败熔岩穴的泰坦后，林克意识到自己的剑术还有提升空间。</p>
 <p>虽然晨曦的龙之力强大，但过度依赖外力会让自身的剑道停滞不前。在与克伦特商议后，林克决定暂时返回赫顿玛尔，向GSD请教更高深的剑魂技艺。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
@@ -642,56 +641,62 @@
 <p>四人相视一笑，向着新的冒险出发。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第三十九章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-38.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-40.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-38.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-40.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-9.html" class="sidebar-chapter ">第9章：转职之路</a>
 <a href="chapter-10.html" class="sidebar-chapter ">第10章：暗黑雷鸣废墟</a>
 <a href="chapter-11.html" class="sidebar-chapter ">第11章：剑魂转职仪式</a>
@@ -753,190 +758,211 @@
 <a href="chapter-67.html" class="sidebar-chapter ">第67章：热血八番街·火箭侠的阴谋</a>
 <a href="chapter-68.html" class="sidebar-chapter ">第68章：绿都格罗兹尼·魔雷者莫纳亨</a>
 <a href="chapter-69.html" class="sidebar-chapter ">第69章：魔雷者的苏醒·莫纳亨的抉择</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(39)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(39)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-40.html b/alacarte-novel-website/chapters/chapter-40.html
index af53b4b..5041403 100644
--- a/alacarte-novel-website/chapters/chapter-40.html
+++ b/alacarte-novel-website/chapters/chapter-40.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>万年雪山·冰心少年 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 40</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>万年雪山·冰心少年 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 40</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>暗黑城入口的战斗结束后，林克收到了来自班图族的求救信。</p>
 <p>万年雪山的冰龙斯卡萨正在苏醒，整个班图族面临灭顶之灾。作为暗精灵王国的恩人，林克义不容辞地接下了这个任务。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
@@ -627,56 +626,62 @@
 <p>"我的女儿，敏泰。"布万加说道，"她是班图族最强的萨满，也是...唯一见过冰龙全貌还活着回来的人。"</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第四十章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-39.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-41.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-39.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-41.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-10.html" class="sidebar-chapter ">第10章：暗黑雷鸣废墟</a>
 <a href="chapter-11.html" class="sidebar-chapter ">第11章：剑魂转职仪式</a>
 <a href="chapter-12.html" class="sidebar-chapter ">第12章：西海岸</a>
@@ -738,190 +743,211 @@
 <a href="chapter-68.html" class="sidebar-chapter ">第68章：绿都格罗兹尼·魔雷者莫纳亨</a>
 <a href="chapter-69.html" class="sidebar-chapter ">第69章：魔雷者的苏醒·莫纳亨的抉择</a>
 <a href="chapter-70.html" class="sidebar-chapter ">第70章：天界之门·根特外围的战火</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(40)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(40)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-41.html b/alacarte-novel-website/chapters/chapter-41.html
index 6e1a421..bf94518 100644
--- a/alacarte-novel-website/chapters/chapter-41.html
+++ b/alacarte-novel-website/chapters/chapter-41.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>敏泰的加入 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 41</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>敏泰的加入 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 41</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>第二天清晨，布万加带着林克来到了营地边缘的一座冰屋前。</p>
 <p>"敏泰就在里面。"布万加的声音中带着一丝担忧，"自从上次从冰龙巢穴回来后，她就一直把自己关在这里。"</p>
 <p>林克点点头，推开了冰屋的门。</p>
@@ -632,56 +631,62 @@
 <p>赛丽亚在一旁看着这一幕，眼中闪过一丝复杂的神色，但很快恢复了平静。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第四十一章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-40.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-42.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-40.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-42.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-11.html" class="sidebar-chapter ">第11章：剑魂转职仪式</a>
 <a href="chapter-12.html" class="sidebar-chapter ">第12章：西海岸</a>
 <a href="chapter-13.html" class="sidebar-chapter ">第13章：龙人之塔</a>
@@ -743,190 +748,211 @@
 <a href="chapter-69.html" class="sidebar-chapter ">第69章：魔雷者的苏醒·莫纳亨的抉择</a>
 <a href="chapter-70.html" class="sidebar-chapter ">第70章：天界之门·根特外围的战火</a>
 <a href="chapter-71.html" class="sidebar-chapter ">第71章：根特北门·泽丁的誓言</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(41)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(41)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-42.html b/alacarte-novel-website/chapters/chapter-42.html
index 70c7d3f..aee25a6 100644
--- a/alacarte-novel-website/chapters/chapter-42.html
+++ b/alacarte-novel-website/chapters/chapter-42.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>山脊·野兽师 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 42</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>山脊·野兽师 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 42</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>离开利库天井后，三人继续向雪山深处进发。</p>
 <p>山脊是通往冰龙巢穴的必经之路，这里地势险峻，两侧是万丈深渊，只有中间一条狭窄的通道可以通行。寒风呼啸，卷起漫天雪花，能见度不足十米。</p>
 <p>"好冷..."敏泰缩了缩脖子，即使穿着厚厚的兽皮衣，她依然感到刺骨的寒意。作为萨满，她更擅长感知和法术，身体素质不如赛丽亚。</p>
@@ -635,56 +634,62 @@
 <p>而在他们身后，赛丽亚回头看了一眼敏泰，两人相视一笑，眼中都闪烁着某种默契。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第四十二章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-41.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-43.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-41.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-43.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-12.html" class="sidebar-chapter ">第12章：西海岸</a>
 <a href="chapter-13.html" class="sidebar-chapter ">第13章：龙人之塔</a>
 <a href="chapter-14.html" class="sidebar-chapter ">第14章：人偶玄关</a>
@@ -746,190 +751,211 @@
 <a href="chapter-70.html" class="sidebar-chapter ">第70章：天界之门·根特外围的战火</a>
 <a href="chapter-71.html" class="sidebar-chapter ">第71章：根特北门·泽丁的誓言</a>
 <a href="chapter-72.html" class="sidebar-chapter ">第72章：根特南门·马琳的效忠</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(42)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(42)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-43.html b/alacarte-novel-website/chapters/chapter-43.html
index a55e071..8f5f379 100644
--- a/alacarte-novel-website/chapters/chapter-43.html
+++ b/alacarte-novel-website/chapters/chapter-43.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>番外·雪山温泉 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 43</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>番外·雪山温泉 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 43</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>从山脊返回营地的第二天，赛丽亚的伤势已经好了大半。</p>
 <p>"今晚去泡温泉吧。"赛丽亚突然提议，"班图族的温泉很有名，对治疗伤势很有帮助。"</p>
 <p>敏泰的脸微微一红："温泉...是混浴吗？"</p>
@@ -607,56 +606,62 @@
 <p>温泉的水流依旧温热，雾气氤氲，将三人包裹在一片温馨的氛围中。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第四十三章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-42.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-44.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-42.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-44.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-13.html" class="sidebar-chapter ">第13章：龙人之塔</a>
 <a href="chapter-14.html" class="sidebar-chapter ">第14章：人偶玄关</a>
 <a href="chapter-15.html" class="sidebar-chapter ">第15章：石巨人塔</a>
@@ -718,190 +723,211 @@
 <a href="chapter-71.html" class="sidebar-chapter ">第71章：根特北门·泽丁的誓言</a>
 <a href="chapter-72.html" class="sidebar-chapter ">第72章：根特南门·马琳的效忠</a>
 <a href="chapter-73.html" class="sidebar-chapter ">第73章：根特防御战·钢铁与血肉的碰撞</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(43)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(43)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-44.html b/alacarte-novel-website/chapters/chapter-44.html
index eb55b97..2cf370d 100644
--- a/alacarte-novel-website/chapters/chapter-44.html
+++ b/alacarte-novel-website/chapters/chapter-44.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>白色废墟 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 44</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>白色废墟 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 44</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>温泉之夜后的第二天，三人精神饱满地出发前往白色废墟。</p>
 <p>"白色废墟曾经是班图族的圣地。"敏泰一边带路一边解释，"但自从冰龙苏醒后，那里被冰雪覆盖，变成了怪物的巢穴。"</p>
 <p>"有什么怪物？"赛丽亚问道。</p>
@@ -628,56 +627,62 @@
 <p>三人在白色废墟的冰雪中相视而笑，虽然疲惫，但心中充满了温暖。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第四十四章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-43.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-45.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-43.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-45.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-14.html" class="sidebar-chapter ">第14章：人偶玄关</a>
 <a href="chapter-15.html" class="sidebar-chapter ">第15章：石巨人塔</a>
 <a href="chapter-16.html" class="sidebar-chapter ">第16章：黑暗玄廊</a>
@@ -739,190 +744,211 @@
 <a href="chapter-72.html" class="sidebar-chapter ">第72章：根特南门·马琳的效忠</a>
 <a href="chapter-73.html" class="sidebar-chapter ">第73章：根特防御战·钢铁与血肉的碰撞</a>
 <a href="chapter-74.html" class="sidebar-chapter ">第74章：夜间袭击战·银勺杂技团的覆灭</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(44)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(44)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-45.html b/alacarte-novel-website/chapters/chapter-45.html
index 863f1b8..d22a6ba 100644
--- a/alacarte-novel-website/chapters/chapter-45.html
+++ b/alacarte-novel-website/chapters/chapter-45.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>冰雪宫殿 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 45</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>冰雪宫殿 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 45</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>从白色废墟返回后，敏泰用雪魈王的核心碎片制作了三枚寒冰护符。</p>
 <p>"这些护符可以抵御冰龙的寒气，但只能维持一段时间。"敏泰将护符分给林克和赛丽亚，"我们必须速战速决。"</p>
 <p>"冰雪宫殿就在前面。"她指向雪山最深处，"那里曾经是班图族祭祀冰雪女神的神殿，现在成了冰龙的行宫。"</p>
@@ -625,56 +624,62 @@
 <p>她看向林克和赛丽亚："跟我去布万加修炼场吧...那里是班图族最神圣的修炼之地，也许...你们能在那里获得突破。"</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第四十五章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-44.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-46.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-44.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-46.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-15.html" class="sidebar-chapter ">第15章：石巨人塔</a>
 <a href="chapter-16.html" class="sidebar-chapter ">第16章：黑暗玄廊</a>
 <a href="chapter-17.html" class="sidebar-chapter ">第17章：城主宫殿</a>
@@ -736,190 +741,211 @@
 <a href="chapter-73.html" class="sidebar-chapter ">第73章：根特防御战·钢铁与血肉的碰撞</a>
 <a href="chapter-74.html" class="sidebar-chapter ">第74章：夜间袭击战·银勺杂技团的覆灭</a>
 <a href="chapter-75.html" class="sidebar-chapter ">第75章：补给线阻断战·UM-0终结者</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(45)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(45)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-46.html b/alacarte-novel-website/chapters/chapter-46.html
index 05a078b..f30e078 100644
--- a/alacarte-novel-website/chapters/chapter-46.html
+++ b/alacarte-novel-website/chapters/chapter-46.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>布万加修炼场 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 46</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>布万加修炼场 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 46</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>从冰雪宫殿返回后，三人来不及休息，便跟着敏泰前往班图族最神圣的修炼之地。</p>
 <p>布万加修炼场位于雪山最高峰的山腰处，是一个天然形成的巨大冰台。传说这里是班图族先祖领悟冰雪之力的地方，每一块冰石都蕴含着远古的意志。</p>
 <p>"就是这里。"敏泰指着前方的冰台，"父亲...布万加族长已经在等着你们了。"</p>
@@ -627,56 +626,62 @@
 <p>"去吧。"布万加指向雪山最高峰，"冰龙斯卡萨...就在那里的巢穴中等待着你们。"</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第四十六章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-45.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-47.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-45.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-47.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-16.html" class="sidebar-chapter ">第16章：黑暗玄廊</a>
 <a href="chapter-17.html" class="sidebar-chapter ">第17章：城主宫殿</a>
 <a href="chapter-18.html" class="sidebar-chapter ">第18章：番外·悬空城</a>
@@ -738,190 +743,211 @@
 <a href="chapter-74.html" class="sidebar-chapter ">第74章：夜间袭击战·银勺杂技团的覆灭</a>
 <a href="chapter-75.html" class="sidebar-chapter ">第75章：补给线阻断战·UM-0终结者</a>
 <a href="chapter-76.html" class="sidebar-chapter ">第76章：追击歼灭战·机械吉赛尔的末路</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(46)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(46)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-47.html b/alacarte-novel-website/chapters/chapter-47.html
index 9494792..0be7e47 100644
--- a/alacarte-novel-website/chapters/chapter-47.html
+++ b/alacarte-novel-website/chapters/chapter-47.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>斯卡萨之巢·龙威 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 47</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>斯卡萨之巢·龙威 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 47</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>从修炼场出发，三人向着雪山最高峰进发。</p>
 <p>越往上走，空气越稀薄，气温越低。即使有寒冰护符和山岳剑势的保护，林克依然能感受到那股来自远古的威压。</p>
 <p>"那就是...冰龙斯卡萨的巢穴。"敏泰指着前方，声音有些颤抖。</p>
@@ -619,56 +618,62 @@
 <p>奥尔卡看着这一幕，嘴角微微上扬："外乡人，明天让我看看你的实力。"</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第四十七章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-46.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-48.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-46.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-48.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-17.html" class="sidebar-chapter ">第17章：城主宫殿</a>
 <a href="chapter-18.html" class="sidebar-chapter ">第18章：番外·悬空城</a>
 <a href="chapter-19.html" class="sidebar-chapter ">第19章：天帷巨兽·神殿外围</a>
@@ -730,190 +735,211 @@
 <a href="chapter-75.html" class="sidebar-chapter ">第75章：补给线阻断战·UM-0终结者</a>
 <a href="chapter-76.html" class="sidebar-chapter ">第76章：追击歼灭战·机械吉赛尔的末路</a>
 <a href="chapter-77.html" class="sidebar-chapter ">第77章：海上列车·鲁夫特悬空海港</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(47)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(47)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-48.html b/alacarte-novel-website/chapters/chapter-48.html
index b1d285d..7b4d9a5 100644
--- a/alacarte-novel-website/chapters/chapter-48.html
+++ b/alacarte-novel-website/chapters/chapter-48.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>斯卡萨之巢·龙陨 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 48</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>斯卡萨之巢·龙陨 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 48</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>第二天清晨，浩浩荡荡的队伍向着冰龙巢穴进发。</p>
 <p>林克走在最前方，身后是赛丽亚、敏泰、奥菲利亚、查理，再后面是奥尔卡率领的二十名班图族勇士。而在队伍的最后，是一个让所有人都感到安心的身影——布万加族长。</p>
 <p>"父亲...您真的亲自来了。"敏泰回头看向布万加。</p>
@@ -654,56 +653,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第四十八章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（雪山篇·完结）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-47.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-49.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-47.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-49.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-18.html" class="sidebar-chapter ">第18章：番外·悬空城</a>
 <a href="chapter-19.html" class="sidebar-chapter ">第19章：天帷巨兽·神殿外围</a>
 <a href="chapter-20.html" class="sidebar-chapter ">第20章：树精丛林</a>
@@ -765,190 +770,211 @@
 <a href="chapter-76.html" class="sidebar-chapter ">第76章：追击歼灭战·机械吉赛尔的末路</a>
 <a href="chapter-77.html" class="sidebar-chapter ">第77章：海上列车·鲁夫特悬空海港</a>
 <a href="chapter-78.html" class="sidebar-chapter ">第78章：列车上的海贼·铁鳞团的覆灭</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(48)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(48)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-49.html b/alacarte-novel-website/chapters/chapter-49.html
index 96f5da0..f212606 100644
--- a/alacarte-novel-website/chapters/chapter-49.html
+++ b/alacarte-novel-website/chapters/chapter-49.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>重返赫顿玛尔 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 49</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>重返赫顿玛尔 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 49</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>从万年雪山返回赫顿玛尔，是一段漫长的旅程。</p>
 <p>林克、赛丽亚、奥菲利亚三人骑着马，沿着官道一路向南。沿途的风景从冰天雪地逐渐变成了绿意盎然，气温也越来越高。</p>
 <p>"终于暖和起来了..."赛丽亚脱下厚重的毛皮大衣，深深地吸了一口清新的空气，"还是赫顿玛尔的气候舒服。"</p>
@@ -644,56 +643,62 @@
 <p>林克笑了："好。"</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第四十九章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-48.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-50.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-48.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-50.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-19.html" class="sidebar-chapter ">第19章：天帷巨兽·神殿外围</a>
 <a href="chapter-20.html" class="sidebar-chapter ">第20章：树精丛林</a>
 <a href="chapter-21.html" class="sidebar-chapter ">第21章：炼狱</a>
@@ -755,190 +760,211 @@
 <a href="chapter-77.html" class="sidebar-chapter ">第77章：海上列车·鲁夫特悬空海港</a>
 <a href="chapter-78.html" class="sidebar-chapter ">第78章：列车上的海贼·铁鳞团的覆灭</a>
 <a href="chapter-79.html" class="sidebar-chapter ">第79章：夺回西部线·卡勒特的余孽</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(49)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(49)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-50.html b/alacarte-novel-website/chapters/chapter-50.html
index cb0d61f..c37037a 100644
--- a/alacarte-novel-website/chapters/chapter-50.html
+++ b/alacarte-novel-website/chapters/chapter-50.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>诺斯玛尔·盗贼团 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 50</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>诺斯玛尔·盗贼团 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 50</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>从赫顿玛尔出发，向北行进三天，便是曾经的繁华都市——诺斯玛尔。</p>
 <p>但现在的诺斯玛尔，已经变成了一座死城。</p>
 <p>越靠近城市，空气中的腐臭味就越浓。原本应该繁忙的官道上，看不到一个行人，只有偶尔窜过的野狗，眼睛发红，显然已经被瘟疫感染。</p>
@@ -624,56 +623,62 @@
 <p>新的冒险，开始了。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第五十章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-49.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-51.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-49.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-51.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-20.html" class="sidebar-chapter ">第20章：树精丛林</a>
 <a href="chapter-21.html" class="sidebar-chapter ">第21章：炼狱</a>
 <a href="chapter-22.html" class="sidebar-chapter ">第22章：西海岸的闲暇</a>
@@ -735,190 +740,211 @@
 <a href="chapter-78.html" class="sidebar-chapter ">第78章：列车上的海贼·铁鳞团的覆灭</a>
 <a href="chapter-79.html" class="sidebar-chapter ">第79章：夺回西部线·卡勒特的余孽</a>
 <a href="chapter-80.html" class="sidebar-chapter ">第80章：雾都赫伊斯·无法地带的阴影</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(50)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(50)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-51.html b/alacarte-novel-website/chapters/chapter-51.html
index 8f25528..4c1e3ff 100644
--- a/alacarte-novel-website/chapters/chapter-51.html
+++ b/alacarte-novel-website/chapters/chapter-51.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>哈穆林·鼠患 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 51</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>哈穆林·鼠患 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 51</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>帕丽丝带着林克和赛丽亚深入诺斯玛尔城区。</p>
 <p>"我们要先去哈穆林。"帕丽丝说道，"那里是城市的老城区，也是瘟疫最严重的地方。据说...那里的老鼠都变异了，比人还大。"</p>
 <p>"比人还大的老鼠？"赛丽亚皱起眉头，"听起来很恶心..."</p>
@@ -633,56 +632,62 @@
 <p>明天，他们将前往月光酒馆，寻找关于狄瑞吉的更多线索。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第五十一章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-50.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-52.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-50.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-52.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-21.html" class="sidebar-chapter ">第21章：炼狱</a>
 <a href="chapter-22.html" class="sidebar-chapter ">第22章：西海岸的闲暇</a>
 <a href="chapter-23.html" class="sidebar-chapter ">第23章：极昼</a>
@@ -744,190 +749,211 @@
 <a href="chapter-79.html" class="sidebar-chapter ">第79章：夺回西部线·卡勒特的余孽</a>
 <a href="chapter-80.html" class="sidebar-chapter ">第80章：雾都赫伊斯·无法地带的阴影</a>
 <a href="chapter-81.html" class="sidebar-chapter ">第81章：阿登高地·GT-9600</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(51)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(51)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-52.html b/alacarte-novel-website/chapters/chapter-52.html
index 22e561d..83a5ff7 100644
--- a/alacarte-novel-website/chapters/chapter-52.html
+++ b/alacarte-novel-website/chapters/chapter-52.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>月光酒馆·寻找阿甘左 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 52</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>月光酒馆·寻找阿甘左 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 52</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>离开哈穆林，三人向着诺斯玛尔城区边缘进发。</p>
 <p>"月光酒馆就在前面。"帕丽丝指着远处一栋建筑，"那里曾经是整个诺斯玛尔最热闹的地方，冒险者、商人、流浪武士...每天晚上都人满为患。"</p>
 <p>"听起来你很熟悉？"赛丽亚问道。</p>
@@ -642,56 +641,62 @@
 <p>月光从破洞的屋顶洒下来，照在两人身上。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第五十二章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-51.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-53.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-51.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-53.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-22.html" class="sidebar-chapter ">第22章：西海岸的闲暇</a>
 <a href="chapter-23.html" class="sidebar-chapter ">第23章：极昼</a>
 <a href="chapter-24.html" class="sidebar-chapter ">第24章：第一脊椎</a>
@@ -753,190 +758,211 @@
 <a href="chapter-80.html" class="sidebar-chapter ">第80章：雾都赫伊斯·无法地带的阴影</a>
 <a href="chapter-81.html" class="sidebar-chapter ">第81章：阿登高地·GT-9600</a>
 <a href="chapter-82.html" class="sidebar-chapter ">第82章：卡勒特指挥部·兰蒂卢斯</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(52)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(52)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-53.html b/alacarte-novel-website/chapters/chapter-53.html
index 87ac9c7..51da363 100644
--- a/alacarte-novel-website/chapters/chapter-53.html
+++ b/alacarte-novel-website/chapters/chapter-53.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>番外·帕丽丝的誓言 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 53</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>番外·帕丽丝的誓言 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 53</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>离开月光酒馆后，三人找了一处相对安全的废弃别墅休息。</p>
 <p>别墅虽然破旧，但结构还算完整，至少有屋顶和墙壁可以遮风挡雨。赛丽亚用火魔法点燃了壁炉，温暖的火光驱散了夜晚的寒冷和恐惧。</p>
 <p>"我去外面警戒。"赛丽亚站起身，意味深长地看了林克和帕丽丝一眼，"你们...好好聊聊。"</p>
@@ -648,56 +647,62 @@
 <p>"嗯。"两位少女齐声应道，眼中都闪烁着坚定的光芒。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第五十三章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-52.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-54.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-52.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-54.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-23.html" class="sidebar-chapter ">第23章：极昼</a>
 <a href="chapter-24.html" class="sidebar-chapter ">第24章：第一脊椎</a>
 <a href="chapter-25.html" class="sidebar-chapter ">第25章：赫顿玛尔的准备</a>
@@ -759,190 +764,211 @@
 <a href="chapter-81.html" class="sidebar-chapter ">第81章：阿登高地·GT-9600</a>
 <a href="chapter-82.html" class="sidebar-chapter ">第82章：卡勒特指挥部·兰蒂卢斯</a>
 <a href="chapter-83.html" class="sidebar-chapter ">第83章：皇女的告白·天界的新篇章</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(53)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(53)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-54.html b/alacarte-novel-website/chapters/chapter-54.html
index ed032c7..14a066b 100644
--- a/alacarte-novel-website/chapters/chapter-54.html
+++ b/alacarte-novel-website/chapters/chapter-54.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>觉醒之路·启程 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 54</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>觉醒之路·启程 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 54</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>离开诺斯玛尔的废墟，林克、赛丽亚、帕丽丝三人踏上了返回赫顿玛尔的路途。</p>
 <p>"真的要回去吗？"帕丽丝有些不舍，"狄瑞吉就在城市中心，我们可以直接去找他..."</p>
 <p>"不行。"林克摇头，"狄瑞吉是第六使徒，比冰龙斯卡萨强百倍。以我们现在的实力，去了就是送死。"</p>
@@ -605,56 +604,62 @@
 <p>觉醒之路，正式开启。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第五十四章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-53.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-55.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-53.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-55.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-24.html" class="sidebar-chapter ">第24章：第一脊椎</a>
 <a href="chapter-25.html" class="sidebar-chapter ">第25章：赫顿玛尔的准备</a>
 <a href="chapter-26.html" class="sidebar-chapter ">第26章：第二脊椎</a>
@@ -716,190 +721,211 @@
 <a href="chapter-82.html" class="sidebar-chapter ">第82章：卡勒特指挥部·兰蒂卢斯</a>
 <a href="chapter-83.html" class="sidebar-chapter ">第83章：皇女的告白·天界的新篇章</a>
 <a href="chapter-84.html" class="sidebar-chapter ">第84章：幽灵列车·亡者的低语</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(54)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(54)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-55.html b/alacarte-novel-website/chapters/chapter-55.html
index dad0a12..318dd6e 100644
--- a/alacarte-novel-website/chapters/chapter-55.html
+++ b/alacarte-novel-website/chapters/chapter-55.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>比尔马克帝国试验场 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 55</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>比尔马克帝国试验场 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 55</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>艾尔文防线以北，是一片被帝国划为禁区的荒凉之地。</p>
 <p>"这里就是比尔马克帝国试验场..."林克看着前方被铁丝网围住的巨大区域，"听说里面全是帝国的禁忌实验体。"</p>
 <p>"没错。"帕丽丝点头，"我以前在诺斯玛尔时听说过这里。帝国用人体和怪物做实验，制造战争兵器。"</p>
@@ -627,56 +626,62 @@
 <p>"哈哈..."林克笑了笑，"第一试炼完成，还有两次试炼等着我们呢。"</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第五十五章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-54.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-56.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-54.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-56.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-25.html" class="sidebar-chapter ">第25章：赫顿玛尔的准备</a>
 <a href="chapter-26.html" class="sidebar-chapter ">第26章：第二脊椎</a>
 <a href="chapter-27.html" class="sidebar-chapter ">第27章：重逢的温柔</a>
@@ -738,190 +743,211 @@
 <a href="chapter-83.html" class="sidebar-chapter ">第83章：皇女的告白·天界的新篇章</a>
 <a href="chapter-84.html" class="sidebar-chapter ">第84章：幽灵列车·亡者的低语</a>
 <a href="chapter-85.html" class="sidebar-chapter ">第85章：伊顿工业区·克雷发电站</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(55)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(55)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-56.html b/alacarte-novel-website/chapters/chapter-56.html
index f97b202..654b0a2 100644
--- a/alacarte-novel-website/chapters/chapter-56.html
+++ b/alacarte-novel-website/chapters/chapter-56.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>王的遗迹·远古五骑士 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 56</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>王的遗迹·远古五骑士 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 56</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>离开比尔马克帝国试验场，三人前往下一个目的地——王的遗迹。</p>
 <p>"王的遗迹位于虚祖边境，是远古王国的遗址。"林克看着GSD给的地图，"那里沉睡着五位远古骑士，他们生前守护着王国的荣耀，死后化为英灵继续守护。"</p>
 <p>"听起来很神圣..."赛丽亚说道，"为什么要打扰他们的安息？"</p>
@@ -642,56 +641,62 @@
 <p>第二试炼，完成。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第五十六章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-55.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-57.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-55.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-57.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-26.html" class="sidebar-chapter ">第26章：第二脊椎</a>
 <a href="chapter-27.html" class="sidebar-chapter ">第27章：重逢的温柔</a>
 <a href="chapter-28.html" class="sidebar-chapter ">第28章：暗精灵的委托</a>
@@ -753,190 +758,211 @@
 <a href="chapter-84.html" class="sidebar-chapter ">第84章：幽灵列车·亡者的低语</a>
 <a href="chapter-85.html" class="sidebar-chapter ">第85章：伊顿工业区·克雷发电站</a>
 <a href="chapter-86.html" class="sidebar-chapter ">第86章：普鲁兹发电站·闪电之帕特里斯</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(56)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(56)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-57.html b/alacarte-novel-website/chapters/chapter-57.html
index 15e4651..df310d3 100644
--- a/alacarte-novel-website/chapters/chapter-57.html
+++ b/alacarte-novel-website/chapters/chapter-57.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>心灵试炼·剑圣觉醒 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 57</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>心灵试炼·剑圣觉醒 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 57</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>离开王的遗迹，三人返回赫顿玛尔。</p>
 <p>"三个试炼已经完成了两个。"林克说道，"还差最后一个——心灵试炼。"</p>
 <p>"心灵试炼是什么？"帕丽丝问道，"听起来很抽象。"</p>
@@ -617,56 +616,62 @@
 <p>明天，他们将返回诺斯玛尔，面对最终的敌人——第六使徒，狄瑞吉。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第五十七章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-56.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-58.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-56.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-58.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-27.html" class="sidebar-chapter ">第27章：重逢的温柔</a>
 <a href="chapter-28.html" class="sidebar-chapter ">第28章：暗精灵的委托</a>
 <a href="chapter-29.html" class="sidebar-chapter ">第29章：阿法利亚营地</a>
@@ -728,190 +733,211 @@
 <a href="chapter-85.html" class="sidebar-chapter ">第85章：伊顿工业区·克雷发电站</a>
 <a href="chapter-86.html" class="sidebar-chapter ">第86章：普鲁兹发电站·闪电之帕特里斯</a>
 <a href="chapter-87.html" class="sidebar-chapter ">第87章：特伦斯发电站·熔岩之萨姆</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(57)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(57)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-58.html b/alacarte-novel-website/chapters/chapter-58.html
index a94476b..30e87e5 100644
--- a/alacarte-novel-website/chapters/chapter-58.html
+++ b/alacarte-novel-website/chapters/chapter-58.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>番外·后宫的温馨 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 58</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>番外·后宫的温馨 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 58</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>觉醒成为剑圣后，林克决定给自己和后宫们放一个长假。</p>
 <p>"我们去雪山吧。"林克提议，"敏泰还在等我们，而且那里的温泉..."</p>
 <p>"你想得美！"赛丽亚嗔怪地看了他一眼，但嘴角带着掩饰不住的笑意，"不过确实该去看看敏泰妹妹了。"</p>
@@ -662,56 +661,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第五十八章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（番外篇·完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-57.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-59.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-57.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-59.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-28.html" class="sidebar-chapter ">第28章：暗精灵的委托</a>
 <a href="chapter-29.html" class="sidebar-chapter ">第29章：阿法利亚营地</a>
 <a href="chapter-30.html" class="sidebar-chapter ">第30章：浅栖之地</a>
@@ -773,190 +778,211 @@
 <a href="chapter-86.html" class="sidebar-chapter ">第86章：普鲁兹发电站·闪电之帕特里斯</a>
 <a href="chapter-87.html" class="sidebar-chapter ">第87章：特伦斯发电站·熔岩之萨姆</a>
 <a href="chapter-88.html" class="sidebar-chapter ">第88章：格兰迪发电站·虚空之弗曼</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(58)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(58)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-59.html b/alacarte-novel-website/chapters/chapter-59.html
index 6810858..ab124a1 100644
--- a/alacarte-novel-website/chapters/chapter-59.html
+++ b/alacarte-novel-website/chapters/chapter-59.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>敏泰的思念 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 59</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>敏泰的思念 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 59</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>后宫聚会的夜晚，其他人都已经入睡。</p>
 <p>林克躺在敏泰为他准备的房间里，却怎么也睡不着。窗外，雪山的月光洒在雪地上，反射出柔和的光芒。</p>
 <p>就在这时，门被轻轻推开了。</p>
@@ -596,56 +595,62 @@
 <p>窗外，雪山的夜空中繁星点点，见证着这对恋人的誓言。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第五十九章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-58.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-60.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-58.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-60.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-29.html" class="sidebar-chapter ">第29章：阿法利亚营地</a>
 <a href="chapter-30.html" class="sidebar-chapter ">第30章：浅栖之地</a>
 <a href="chapter-31.html" class="sidebar-chapter ">第31章：蜘蛛洞穴</a>
@@ -707,190 +712,211 @@
 <a href="chapter-87.html" class="sidebar-chapter ">第87章：特伦斯发电站·熔岩之萨姆</a>
 <a href="chapter-88.html" class="sidebar-chapter ">第88章：格兰迪发电站·虚空之弗曼</a>
 <a href="chapter-89.html" class="sidebar-chapter ">第89章：安图恩攻坚战·黑雾之源</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(59)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(59)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-60.html b/alacarte-novel-website/chapters/chapter-60.html
index 61dfbba..0edb143 100644
--- a/alacarte-novel-website/chapters/chapter-60.html
+++ b/alacarte-novel-website/chapters/chapter-60.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>敏泰加入·前往诺伊佩拉 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 60</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>敏泰加入·前往诺伊佩拉 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 60</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>清晨，当第一缕阳光照进雪山营地时，敏泰已经收拾好了行囊。</p>
 <p>"父亲，我要走了。"敏泰站在布万加面前，眼中带着坚定，"我要和林克一起去冒险。"</p>
 <p>布万加看着自己的女儿，沉默了片刻，然后哈哈大笑："我就知道会有这一天！"</p>
@@ -604,56 +603,62 @@
 <p>四人相视而笑，向着新的冒险出发。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第六十章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-59.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-61.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-59.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-61.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-30.html" class="sidebar-chapter ">第30章：浅栖之地</a>
 <a href="chapter-31.html" class="sidebar-chapter ">第31章：蜘蛛洞穴</a>
 <a href="chapter-32.html" class="sidebar-chapter ">第32章：克伦特的委托</a>
@@ -715,190 +720,211 @@
 <a href="chapter-88.html" class="sidebar-chapter ">第88章：格兰迪发电站·虚空之弗曼</a>
 <a href="chapter-89.html" class="sidebar-chapter ">第89章：安图恩攻坚战·黑雾之源</a>
 <a href="chapter-90.html" class="sidebar-chapter ">第90章：安图恩攻坚战·震颤的大地</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(60)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(60)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-61.html b/alacarte-novel-website/chapters/chapter-61.html
index 04c9d38..3fb0a48 100644
--- a/alacarte-novel-website/chapters/chapter-61.html
+++ b/alacarte-novel-website/chapters/chapter-61.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>悲鸣洞穴·阿甘左与卢克西 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 61</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>悲鸣洞穴·阿甘左与卢克西 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 61</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>从诺伊佩拉返回后，林克收到了一封来自阿甘左的信。</p>
 <p>"悲鸣洞穴出现异常，速来。"</p>
 <p>简短的几个字，却让林克感受到了事情的严重性。</p>
@@ -634,56 +633,62 @@
 <p>悲鸣洞穴的风，似乎在诉说着一段永恒的悲歌。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第六十一章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-60.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-62.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-60.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-62.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-31.html" class="sidebar-chapter ">第31章：蜘蛛洞穴</a>
 <a href="chapter-32.html" class="sidebar-chapter ">第32章：克伦特的委托</a>
 <a href="chapter-33.html" class="sidebar-chapter ">第33章：暗精灵墓地·左翼守卫</a>
@@ -745,190 +750,211 @@
 <a href="chapter-89.html" class="sidebar-chapter ">第89章：安图恩攻坚战·黑雾之源</a>
 <a href="chapter-90.html" class="sidebar-chapter ">第90章：安图恩攻坚战·震颤的大地</a>
 <a href="chapter-91.html" class="sidebar-chapter ">第91章：安图恩攻坚战·擎天之柱</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(61)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(61)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-62.html b/alacarte-novel-website/chapters/chapter-62.html
index c321c72..6dc1da3 100644
--- a/alacarte-novel-website/chapters/chapter-62.html
+++ b/alacarte-novel-website/chapters/chapter-62.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>战前准备·痛苦之村的情报 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 62</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>战前准备·痛苦之村的情报 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 62</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>从悲鸣洞穴返回后，四人没有立即出发，而是在阿法利亚营地休整。</p>
 <p>"真野猪...不是那么好对付的。"帕丽丝坐在篝火旁，难得露出了严肃的表情，"我小时候听老人们说过，痛苦之村列瑟芬是诺斯玛尔最危险的地方，进去的人没有一个能活着出来。"</p>
 <p>"因为它是狄瑞吉的真正巢穴。"林克说道，"之前的假野猪只是它的幻影，而这次我们要面对的是本体。"</p>
@@ -583,56 +582,62 @@
 <p>四人的手叠在一起，月光洒在他们身上，仿佛在为即将到来的决战祝福。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第六十二章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-61.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-63.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-61.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-63.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-32.html" class="sidebar-chapter ">第32章：克伦特的委托</a>
 <a href="chapter-33.html" class="sidebar-chapter ">第33章：暗精灵墓地·左翼守卫</a>
 <a href="chapter-34.html" class="sidebar-chapter ">第34章：暗精灵墓地·剩余三将军</a>
@@ -694,190 +699,211 @@
 <a href="chapter-90.html" class="sidebar-chapter ">第90章：安图恩攻坚战·震颤的大地</a>
 <a href="chapter-91.html" class="sidebar-chapter ">第91章：安图恩攻坚战·擎天之柱</a>
 <a href="chapter-92.html" class="sidebar-chapter ">第92章：安图恩攻坚战·黑色火山</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(62)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(62)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-63.html b/alacarte-novel-website/chapters/chapter-63.html
index c654dd1..15a2341 100644
--- a/alacarte-novel-website/chapters/chapter-63.html
+++ b/alacarte-novel-website/chapters/chapter-63.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>痛苦之村列瑟芬·狄瑞吉的真身 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 63</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>痛苦之村列瑟芬·狄瑞吉的真身 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 63</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>痛苦之村列瑟芬位于诺斯玛尔最深处，是一个被瘟疫完全吞噬的村庄。</p>
 <p>当林克四人抵达村口时，眼前的景象让所有人都倒吸一口冷气。</p>
 <p>曾经繁华的村庄如今只剩下断壁残垣，地面上流淌着紫黑色的液体，空气中弥漫着令人作呕的腐臭味。更可怕的是，那些房屋中隐约可以看到人影——那是被瘟疫完全腐蚀的村民，他们已经变成了行尸走肉，在村中游荡。</p>
@@ -620,56 +619,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第六十三章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（诺斯玛尔篇·正式完结）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-62.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-64.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-62.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-64.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-33.html" class="sidebar-chapter ">第33章：暗精灵墓地·左翼守卫</a>
 <a href="chapter-34.html" class="sidebar-chapter ">第34章：暗精灵墓地·剩余三将军</a>
 <a href="chapter-35.html" class="sidebar-chapter ">第35章：邪龙斯皮兹</a>
@@ -731,190 +736,211 @@
 <a href="chapter-91.html" class="sidebar-chapter ">第91章：安图恩攻坚战·擎天之柱</a>
 <a href="chapter-92.html" class="sidebar-chapter ">第92章：安图恩攻坚战·黑色火山</a>
 <a href="chapter-93.html" class="sidebar-chapter ">第93章：安图恩攻坚战·使徒陨落</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(63)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(63)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-64.html b/alacarte-novel-website/chapters/chapter-64.html
index e645a6a..0e8674b 100644
--- a/alacarte-novel-website/chapters/chapter-64.html
+++ b/alacarte-novel-website/chapters/chapter-64.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>胜利归来·赫顿玛尔的庆祝 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 64</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>胜利归来·赫顿玛尔的庆祝 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 64</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>赫顿玛尔，冒险家协会总部。</p>
 <p>当林克四人走进大门时，迎接他们的是雷鸣般的掌声。</p>
 <p>整个大厅挤满了人——有冒险家、有商人、有普通市民，甚至还有一些熟悉的身影。</p>
@@ -583,56 +582,62 @@
 <p>明天，将是新的开始。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第六十四章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-63.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-65.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-63.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-65.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-34.html" class="sidebar-chapter ">第34章：暗精灵墓地·剩余三将军</a>
 <a href="chapter-35.html" class="sidebar-chapter ">第35章：邪龙斯皮兹</a>
 <a href="chapter-36.html" class="sidebar-chapter ">第36章：莎兰的探望</a>
@@ -694,190 +699,211 @@
 <a href="chapter-92.html" class="sidebar-chapter ">第92章：安图恩攻坚战·黑色火山</a>
 <a href="chapter-93.html" class="sidebar-chapter ">第93章：安图恩攻坚战·使徒陨落</a>
 <a href="chapter-94.html" class="sidebar-chapter ">第94章：克洛诺斯岛·寂静城的召唤</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(64)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(64)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-65.html b/alacarte-novel-website/chapters/chapter-65.html
index 44b6db4..560c3cf 100644
--- a/alacarte-novel-website/chapters/chapter-65.html
+++ b/alacarte-novel-website/chapters/chapter-65.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>正宫的专属时光·赛丽亚的深情 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 65</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>正宫的专属时光·赛丽亚的深情 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 65</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>庆祝宴会结束后，其他人都各自回房休息，只留下林克和赛丽亚在阳台上。</p>
 <p>"今天真的很开心。"赛丽亚靠在林克肩上，轻声说道，"看到那么多人为你欢呼，我为你骄傲。"</p>
 <p>"这都是因为有你。"林克握住她的手，"如果没有你一直陪着我，我走不到今天。"</p>
@@ -584,56 +583,62 @@
 <p>月光下，两人紧紧相拥，仿佛时间在这一刻静止。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第六十五章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-64.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-66.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-64.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-66.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-35.html" class="sidebar-chapter ">第35章：邪龙斯皮兹</a>
 <a href="chapter-36.html" class="sidebar-chapter ">第36章：莎兰的探望</a>
 <a href="chapter-37.html" class="sidebar-chapter ">第37章：暗影迷宫·影子剑士</a>
@@ -695,190 +700,211 @@
 <a href="chapter-93.html" class="sidebar-chapter ">第93章：安图恩攻坚战·使徒陨落</a>
 <a href="chapter-94.html" class="sidebar-chapter ">第94章：克洛诺斯岛·寂静城的召唤</a>
 <a href="chapter-95.html" class="sidebar-chapter ">第95章：寂静城的秘密</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(65)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(65)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-66.html b/alacarte-novel-website/chapters/chapter-66.html
index 85400ad..4b1158c 100644
--- a/alacarte-novel-website/chapters/chapter-66.html
+++ b/alacarte-novel-website/chapters/chapter-66.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>番外·五人同床·后宫大被同眠 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 66</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>番外·五人同床·后宫大被同眠 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 66</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>诺斯玛尔篇的结束，让林克终于有了一段难得的闲暇时光。</p>
 <p>第六使徒狄瑞吉被击败的消息传遍了整个阿拉德大陆，林克的名字再次成为人们口中的传奇。但对于林克来说，比起那些虚名，他更珍惜此刻能够与自己心爱的女人们共处的时光。</p>
 <p>赫顿玛尔的新豪宅中，夜色已深。</p>
@@ -626,56 +625,62 @@
 <p>当晨光透过窗棂洒入温泉池时，五人相拥而眠，脸上都带着满足而幸福的笑容。</p>
 <p>林克被五女环绕，感受着她们的体温与呼吸，心中暗暗发誓：无论未来有多少艰难险阻，他都要守护这些深爱他的女人，给她们一个幸福的未来。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第六十六章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-65.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-67.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-65.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-67.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-36.html" class="sidebar-chapter ">第36章：莎兰的探望</a>
 <a href="chapter-37.html" class="sidebar-chapter ">第37章：暗影迷宫·影子剑士</a>
 <a href="chapter-38.html" class="sidebar-chapter ">第38章：熔岩穴·泰坦之怒</a>
@@ -737,190 +742,211 @@
 <a href="chapter-94.html" class="sidebar-chapter ">第94章：克洛诺斯岛·寂静城的召唤</a>
 <a href="chapter-95.html" class="sidebar-chapter ">第95章：寂静城的秘密</a>
 <a href="chapter-96.html" class="sidebar-chapter ">第96章：番外·贝奇的献身</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(66)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(66)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-67.html b/alacarte-novel-website/chapters/chapter-67.html
index b15acdf..04c2c06 100644
--- a/alacarte-novel-website/chapters/chapter-67.html
+++ b/alacarte-novel-website/chapters/chapter-67.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>热血八番街·火箭侠的阴谋 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 67</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>热血八番街·火箭侠的阴谋 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 67</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>诺斯玛尔的夜晚，月光被厚重的云层遮蔽，只剩下几盏昏黄的路灯在风中摇曳。</p>
 <p>林克站在赫顿玛尔后街的入口，身旁是赛丽亚、敏泰、帕丽丝、莎兰和奥菲利亚五位后宫。经过第66章的亲密之夜，六人之间的羁绊更加深厚，但此刻他们的表情都很凝重。</p>
 <p>凯丽站在他们面前，粉色的长发在夜风中飘动，机械臂发出轻微的嗡鸣声。</p>
@@ -641,56 +640,62 @@
 <p>但他们不知道的是，在远处的阴影中，一双眼睛正注视着他们离去的背影。</p>
 <p>"火箭侠失败了……"一个低沉的声音响起，"但没关系，格罗兹尼那边，莫纳亨会收拾他们的……"</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第六十七章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-66.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-68.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-66.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-68.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-37.html" class="sidebar-chapter ">第37章：暗影迷宫·影子剑士</a>
 <a href="chapter-38.html" class="sidebar-chapter ">第38章：熔岩穴·泰坦之怒</a>
 <a href="chapter-39.html" class="sidebar-chapter ">第39章：暗黑城入口·无头骑士</a>
@@ -752,190 +757,211 @@
 <a href="chapter-95.html" class="sidebar-chapter ">第95章：寂静城的秘密</a>
 <a href="chapter-96.html" class="sidebar-chapter ">第96章：番外·贝奇的献身</a>
 <a href="chapter-97.html" class="sidebar-chapter ">第97章：光之舞会</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(67)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(67)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-68.html b/alacarte-novel-website/chapters/chapter-68.html
index 44fbf58..45d3695 100644
--- a/alacarte-novel-website/chapters/chapter-68.html
+++ b/alacarte-novel-website/chapters/chapter-68.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>绿都格罗兹尼·魔雷者莫纳亨 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 68</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>绿都格罗兹尼·魔雷者莫纳亨 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 68</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>热血八番街的战斗结束后，林克六人带着受伤的麦吉返回赫顿玛尔。</p>
 <p>凯丽的工坊里，机械臂的嗡鸣声和焊接的火花交织在一起。麦吉躺在工作台上，虽然伤势不轻，但嘴里还在嘟囔着："那个疯女人……下次见到她一定要……"</p>
 <p>"安静点。"凯丽没好气地敲了一下他的脑袋，"要不是我，你早就成烤哥布林了。"</p>
@@ -660,56 +659,62 @@
 <p>"这就是我们爱你的原因啊。"赛丽亚微笑道。</p>
 <p>窗外，阳光正好。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第六十八章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-67.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-69.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-67.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-69.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-38.html" class="sidebar-chapter ">第38章：熔岩穴·泰坦之怒</a>
 <a href="chapter-39.html" class="sidebar-chapter ">第39章：暗黑城入口·无头骑士</a>
 <a href="chapter-40.html" class="sidebar-chapter ">第40章：万年雪山·冰心少年</a>
@@ -771,190 +776,211 @@
 <a href="chapter-96.html" class="sidebar-chapter ">第96章：番外·贝奇的献身</a>
 <a href="chapter-97.html" class="sidebar-chapter ">第97章：光之舞会</a>
 <a href="chapter-98.html" class="sidebar-chapter ">第98章：钢铁之臂</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(68)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(68)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-69.html b/alacarte-novel-website/chapters/chapter-69.html
index e41d27c..407230a 100644
--- a/alacarte-novel-website/chapters/chapter-69.html
+++ b/alacarte-novel-website/chapters/chapter-69.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>魔雷者的苏醒·莫纳亨的抉择 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 69</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>魔雷者的苏醒·莫纳亨的抉择 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 69</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>绿都格罗兹尼的战斗已经过去三天。</p>
 <p>凯丽的工坊里，莫纳亨静静地躺在病床上，紫色的长发散落在枕头上，脸色虽然苍白，但呼吸已经平稳。她身上的念动力控制装置已被成功取出，那些困扰她多年的痛苦终于结束了。</p>
 <p>林克坐在床边，目光温柔地看着她。这三天来，他每天都会来这里看望，等待着她的苏醒。</p>
@@ -657,56 +656,62 @@
 <p>窗外，月光如水，洒在这座温馨的豪宅上。</p>
 <p>后宫的第六位成员，正式归位。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第六十九章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-68.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-70.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-68.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-70.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-39.html" class="sidebar-chapter ">第39章：暗黑城入口·无头骑士</a>
 <a href="chapter-40.html" class="sidebar-chapter ">第40章：万年雪山·冰心少年</a>
 <a href="chapter-41.html" class="sidebar-chapter ">第41章：敏泰的加入</a>
@@ -768,190 +773,211 @@
 <a href="chapter-97.html" class="sidebar-chapter ">第97章：光之舞会</a>
 <a href="chapter-98.html" class="sidebar-chapter ">第98章：钢铁之臂</a>
 <a href="chapter-99.html" class="sidebar-chapter ">第99章：能源熔炉</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(69)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(69)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-70.html b/alacarte-novel-website/chapters/chapter-70.html
index 37509a0..26d08f4 100644
--- a/alacarte-novel-website/chapters/chapter-70.html
+++ b/alacarte-novel-website/chapters/chapter-70.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>天界之门·根特外围的战火 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 70</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>天界之门·根特外围的战火 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 70</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>清晨的阳光透过窗帘洒进卧室，林克睁开眼睛，看到六张绝美的脸庞正依偎在他身边。</p>
 <p>赛丽亚、敏泰、帕丽丝、莎兰、奥菲利亚、莫纳亨——他的六位后宫成员，此刻都安静地睡在他身旁，构成了一幅令人心醉的画面。</p>
 <p>"主人醒了？"赛丽亚最先察觉到动静，睁开眼睛温柔地看着他。</p>
@@ -680,56 +679,62 @@
 <p>天界的夜空中，繁星点点，与阿拉德的星空并无不同。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第七十章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-69.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-71.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-69.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-71.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-40.html" class="sidebar-chapter ">第40章：万年雪山·冰心少年</a>
 <a href="chapter-41.html" class="sidebar-chapter ">第41章：敏泰的加入</a>
 <a href="chapter-42.html" class="sidebar-chapter ">第42章：山脊·野兽师</a>
@@ -791,190 +796,211 @@
 <a href="chapter-98.html" class="sidebar-chapter ">第98章：钢铁之臂</a>
 <a href="chapter-99.html" class="sidebar-chapter ">第99章：能源熔炉</a>
 <a href="chapter-100.html" class="sidebar-chapter ">第100章：王之书库</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(70)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(70)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-71.html b/alacarte-novel-website/chapters/chapter-71.html
index 7f30ec8..35d4486 100644
--- a/alacarte-novel-website/chapters/chapter-71.html
+++ b/alacarte-novel-website/chapters/chapter-71.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>根特北门·泽丁的誓言 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 71</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>根特北门·泽丁的誓言 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 71</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>根特北门，战火纷飞。</p>
 <p>林克站在临时指挥所内，看着地图上密密麻麻的红点——那是卡勒特的兵力部署。与根特外围的小股部队不同，这里聚集的是卡勒特的主力大军。</p>
 <p>"情况比想象的更糟。"泽丁·施奈德皱眉说道，她的独臂撑在地图上，"北门是根特最重要的防线，一旦被突破，整个城市都将沦陷。"</p>
@@ -676,56 +675,62 @@
 <p>"我也爱你。"</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第七十一章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-70.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-72.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-70.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-72.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-41.html" class="sidebar-chapter ">第41章：敏泰的加入</a>
 <a href="chapter-42.html" class="sidebar-chapter ">第42章：山脊·野兽师</a>
 <a href="chapter-43.html" class="sidebar-chapter ">第43章：番外·雪山温泉</a>
@@ -787,190 +792,211 @@
 <a href="chapter-99.html" class="sidebar-chapter ">第99章：能源熔炉</a>
 <a href="chapter-100.html" class="sidebar-chapter ">第100章：王之书库</a>
 <a href="chapter-101.html" class="sidebar-chapter ">第101章：不灭回廊</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(71)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(71)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-72.html b/alacarte-novel-website/chapters/chapter-72.html
index 28892da..37ef3b5 100644
--- a/alacarte-novel-website/chapters/chapter-72.html
+++ b/alacarte-novel-website/chapters/chapter-72.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>根特南门·马琳的效忠 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 72</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>根特南门·马琳的效忠 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 72</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>根特北门之战的胜利，为皇都军赢得了宝贵的喘息时间。</p>
 <p>但卡勒特并未就此罢休，他们集结了更强大的兵力，向根特南门发动了总攻。</p>
 <p>"情况紧急。"马琳·基希卡在作战会议上说道，她的红发在灯光下闪烁着光泽，"南门守备队发来求援信号，卡勒特投入了主力部队，还有...新型机动兵器。"</p>
@@ -693,56 +692,62 @@
 <p>"还不花心？"泽丁和马琳异口同声，然后相视而笑。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第七十二章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-71.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-73.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-71.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-73.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-42.html" class="sidebar-chapter ">第42章：山脊·野兽师</a>
 <a href="chapter-43.html" class="sidebar-chapter ">第43章：番外·雪山温泉</a>
 <a href="chapter-44.html" class="sidebar-chapter ">第44章：白色废墟</a>
@@ -804,190 +809,211 @@
 <a href="chapter-100.html" class="sidebar-chapter ">第100章：王之书库</a>
 <a href="chapter-101.html" class="sidebar-chapter ">第101章：不灭回廊</a>
 <a href="chapter-102.html" class="sidebar-chapter ">第102章：机械王座</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(72)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(72)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-73.html b/alacarte-novel-website/chapters/chapter-73.html
index 7c715e0..2e85735 100644
--- a/alacarte-novel-website/chapters/chapter-73.html
+++ b/alacarte-novel-website/chapters/chapter-73.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>根特防御战·钢铁与血肉的碰撞 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 73</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>根特防御战·钢铁与血肉的碰撞 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 73</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>根特南门之战的胜利，让皇都军士气大振。</p>
 <p>但所有人都知道，真正的决战才刚刚开始。卡勒特的主力部队仍在，他们的首领兰蒂卢斯还没有现身。</p>
 <p>"根据情报，卡勒特正在集结全部兵力，准备发动总攻。"泽丁在作战会议上说道，她的独臂指着地图上的红点，"他们的目标是根特的核心区域——皇都。"</p>
@@ -619,56 +618,62 @@
 <p>"谢什么？"两女笑道，"我们是你的女人啊。"</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第七十三章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-72.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-74.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-72.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-74.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-43.html" class="sidebar-chapter ">第43章：番外·雪山温泉</a>
 <a href="chapter-44.html" class="sidebar-chapter ">第44章：白色废墟</a>
 <a href="chapter-45.html" class="sidebar-chapter ">第45章：冰雪宫殿</a>
@@ -730,190 +735,211 @@
 <a href="chapter-101.html" class="sidebar-chapter ">第101章：不灭回廊</a>
 <a href="chapter-102.html" class="sidebar-chapter ">第102章：机械王座</a>
 <a href="chapter-103.html" class="sidebar-chapter ">第103章：番外·寂静城的早晨</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(73)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(73)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-74.html b/alacarte-novel-website/chapters/chapter-74.html
index 0d8a64e..4ff8675 100644
--- a/alacarte-novel-website/chapters/chapter-74.html
+++ b/alacarte-novel-website/chapters/chapter-74.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>夜间袭击战·银勺杂技团的覆灭 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 74</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>夜间袭击战·银勺杂技团的覆灭 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 74</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>根特防御战的胜利，让卡勒特元气大伤。</p>
 <p>但情报显示，他们在峡谷深处还设有一个秘密前哨基地，由一支名为"银勺杂技团"的雇佣兵守卫。</p>
 <p>"银勺杂技团？"林克疑惑地看着泽丁。</p>
@@ -657,56 +656,62 @@
 <p>两人相拥在夜色中，远处的星空璀璨如画。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第七十四章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-73.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-75.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-73.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-75.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-44.html" class="sidebar-chapter ">第44章：白色废墟</a>
 <a href="chapter-45.html" class="sidebar-chapter ">第45章：冰雪宫殿</a>
 <a href="chapter-46.html" class="sidebar-chapter ">第46章：布万加修炼场</a>
@@ -768,190 +773,211 @@
 <a href="chapter-102.html" class="sidebar-chapter ">第102章：机械王座</a>
 <a href="chapter-103.html" class="sidebar-chapter ">第103章：番外·寂静城的早晨</a>
 <a href="chapter-104.html" class="sidebar-chapter ">第104章：番外·贝奇与艾泽拉</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(74)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(74)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-75.html b/alacarte-novel-website/chapters/chapter-75.html
index b95849e..a0e82ac 100644
--- a/alacarte-novel-website/chapters/chapter-75.html
+++ b/alacarte-novel-website/chapters/chapter-75.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>补给线阻断战·UM-0终结者 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 75</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>补给线阻断战·UM-0终结者 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 75</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>马琳加入后，皇都军士气大振。但泽丁知道，要彻底击退卡勒特，必须切断他们的补给线。</p>
 <p>"林克。"泽丁指着地图，"根据情报，卡勒特在安特贝鲁峡谷有一个前线补给基地。这里是他们围攻根特的生命线。"</p>
 <p>"切断它。"林克点头，"就能让前线的卡勒特军队陷入混乱。"</p>
@@ -632,56 +631,62 @@
 <p>两人相视一笑，在月光下轻轻相拥。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第七十五章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-74.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-76.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-74.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-76.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-45.html" class="sidebar-chapter ">第45章：冰雪宫殿</a>
 <a href="chapter-46.html" class="sidebar-chapter ">第46章：布万加修炼场</a>
 <a href="chapter-47.html" class="sidebar-chapter ">第47章：斯卡萨之巢·龙威</a>
@@ -743,190 +748,211 @@
 <a href="chapter-103.html" class="sidebar-chapter ">第103章：番外·寂静城的早晨</a>
 <a href="chapter-104.html" class="sidebar-chapter ">第104章：番外·贝奇与艾泽拉</a>
 <a href="chapter-105.html" class="sidebar-chapter ">第105章：番外·卢克的嘱托</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(75)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(75)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-76.html b/alacarte-novel-website/chapters/chapter-76.html
index 4121bad..564dbe6 100644
--- a/alacarte-novel-website/chapters/chapter-76.html
+++ b/alacarte-novel-website/chapters/chapter-76.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>追击歼灭战·机械吉赛尔的末路 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 76</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>追击歼灭战·机械吉赛尔的末路 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 76</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>补给线被切断的消息传来，卡勒特前线部队陷入混乱。皇都军抓住机会，发动全面反击！</p>
 <p>"全军出击！"</p>
 <p>随着指挥官一声令下，皇都军的装甲部队、步兵军团如同潮水般涌出根特，向撤退的卡勒特残军发起追击！</p>
@@ -631,56 +630,62 @@
 <p>"好，一起去。"</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第七十六章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-75.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-77.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-75.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-77.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-46.html" class="sidebar-chapter ">第46章：布万加修炼场</a>
 <a href="chapter-47.html" class="sidebar-chapter ">第47章：斯卡萨之巢·龙威</a>
 <a href="chapter-48.html" class="sidebar-chapter ">第48章：斯卡萨之巢·龙陨</a>
@@ -742,190 +747,211 @@
 <a href="chapter-104.html" class="sidebar-chapter ">第104章：番外·贝奇与艾泽拉</a>
 <a href="chapter-105.html" class="sidebar-chapter ">第105章：番外·卢克的嘱托</a>
 <a href="chapter-106.html" class="sidebar-chapter ">第106章：时空之门的召唤</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(76)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(76)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-77.html b/alacarte-novel-website/chapters/chapter-77.html
index a591a61..8d4ec58 100644
--- a/alacarte-novel-website/chapters/chapter-77.html
+++ b/alacarte-novel-website/chapters/chapter-77.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>海上列车·鲁夫特悬空海港 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 77</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>海上列车·鲁夫特悬空海港 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 77</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>根特防御战胜利后，林克收到了新的任务。</p>
 <p>"我们需要前往西部线。"泽丁看着地图说道，"那里有卡勒特的残余势力在活动。"</p>
 <p>"西部线？"林克问。</p>
@@ -694,56 +693,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第七十七章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（天界篇·第十二章）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-76.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-78.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-76.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-78.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-47.html" class="sidebar-chapter ">第47章：斯卡萨之巢·龙威</a>
 <a href="chapter-48.html" class="sidebar-chapter ">第48章：斯卡萨之巢·龙陨</a>
 <a href="chapter-49.html" class="sidebar-chapter ">第49章：重返赫顿玛尔</a>
@@ -805,190 +810,211 @@
 <a href="chapter-105.html" class="sidebar-chapter ">第105章：番外·卢克的嘱托</a>
 <a href="chapter-106.html" class="sidebar-chapter ">第106章：时空之门的召唤</a>
 <a href="chapter-107.html" class="sidebar-chapter ">第107章：格兰之火</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(77)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(77)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-78.html b/alacarte-novel-website/chapters/chapter-78.html
index 388a0f8..7c3f4d6 100644
--- a/alacarte-novel-website/chapters/chapter-78.html
+++ b/alacarte-novel-website/chapters/chapter-78.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>列车上的海贼·铁鳞团的覆灭 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 78</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>列车上的海贼·铁鳞团的覆灭 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 78</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>西部线，曾经天界最繁忙的运输线之一。</p>
 <p>现在，这里却成了海贼的乐园。</p>
 <p>林克一行人沿着废弃的轨道前进，周围是一片荒芜的景象。</p>
@@ -685,56 +684,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第七十八章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（天界篇·第十三章）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-77.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-79.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-77.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-79.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-48.html" class="sidebar-chapter ">第48章：斯卡萨之巢·龙陨</a>
 <a href="chapter-49.html" class="sidebar-chapter ">第49章：重返赫顿玛尔</a>
 <a href="chapter-50.html" class="sidebar-chapter ">第50章：诺斯玛尔·盗贼团</a>
@@ -796,190 +801,211 @@
 <a href="chapter-106.html" class="sidebar-chapter ">第106章：时空之门的召唤</a>
 <a href="chapter-107.html" class="sidebar-chapter ">第107章：格兰之火</a>
 <a href="chapter-108.html" class="sidebar-chapter ">第108章：瘟疫之源</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(78)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(78)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-79.html b/alacarte-novel-website/chapters/chapter-79.html
index de3c8d4..8a75be3 100644
--- a/alacarte-novel-website/chapters/chapter-79.html
+++ b/alacarte-novel-website/chapters/chapter-79.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>夺回西部线·卡勒特的余孽 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 79</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>夺回西部线·卡勒特的余孽 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 79</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>铁鳞团覆灭后，西部线表面上恢复了平静。</p>
 <p>但林克知道，还有更多的敌人隐藏在暗处。</p>
 <p>"根据情报，"泽丁看着手中的资料，"西部线深处还有卡勒特的正规军残党。"</p>
@@ -655,56 +654,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第七十九章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（天界篇·第十四章）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-78.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-80.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-78.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-80.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-49.html" class="sidebar-chapter ">第49章：重返赫顿玛尔</a>
 <a href="chapter-50.html" class="sidebar-chapter ">第50章：诺斯玛尔·盗贼团</a>
 <a href="chapter-51.html" class="sidebar-chapter ">第51章：哈穆林·鼠患</a>
@@ -766,190 +771,211 @@
 <a href="chapter-107.html" class="sidebar-chapter ">第107章：格兰之火</a>
 <a href="chapter-108.html" class="sidebar-chapter ">第108章：瘟疫之源</a>
 <a href="chapter-109.html" class="sidebar-chapter ">第109章：卡勒特之初</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(79)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(79)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-80.html b/alacarte-novel-website/chapters/chapter-80.html
index e5149bb..627ea56 100644
--- a/alacarte-novel-website/chapters/chapter-80.html
+++ b/alacarte-novel-website/chapters/chapter-80.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>雾都赫伊斯·无法地带的阴影 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 80</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>雾都赫伊斯·无法地带的阴影 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 80</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>西部线的战斗结束后，林克一行人来到了雾都赫伊斯。</p>
 <p>这里是天界最诡异的地区之一，终年被浓雾笼罩。</p>
 <p>浓雾从地底涌出，遮蔽了阳光，让这里永远处于昏暗中。</p>
@@ -642,56 +641,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第八十章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（天界篇·第十五章）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-79.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-81.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-79.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-81.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-50.html" class="sidebar-chapter ">第50章：诺斯玛尔·盗贼团</a>
 <a href="chapter-51.html" class="sidebar-chapter ">第51章：哈穆林·鼠患</a>
 <a href="chapter-52.html" class="sidebar-chapter ">第52章：月光酒馆·寻找阿甘左</a>
@@ -753,190 +758,211 @@
 <a href="chapter-108.html" class="sidebar-chapter ">第108章：瘟疫之源</a>
 <a href="chapter-109.html" class="sidebar-chapter ">第109章：卡勒特之初</a>
 <a href="chapter-110.html" class="sidebar-chapter ">第110章：无法地带</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(80)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(80)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-81.html b/alacarte-novel-website/chapters/chapter-81.html
index e754e30..cab2772 100644
--- a/alacarte-novel-website/chapters/chapter-81.html
+++ b/alacarte-novel-website/chapters/chapter-81.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>阿登高地·GT-9600 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 81</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>阿登高地·GT-9600 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 81</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>雾都赫伊斯毁灭后，林克一行人来到了阿登高地。</p>
 <p>阿登高地位于无法地带的最深处，是一片险峻的山地。</p>
 <p>"根据情报，"泽丁看着地图，"这里有一台巨大的机甲——GT-9600。"</p>
@@ -647,56 +646,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第八十一章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（天界篇·第十六章）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-80.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-82.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-80.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-82.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-51.html" class="sidebar-chapter ">第51章：哈穆林·鼠患</a>
 <a href="chapter-52.html" class="sidebar-chapter ">第52章：月光酒馆·寻找阿甘左</a>
 <a href="chapter-53.html" class="sidebar-chapter ">第53章：番外·帕丽丝的誓言</a>
@@ -758,190 +763,211 @@
 <a href="chapter-109.html" class="sidebar-chapter ">第109章：卡勒特之初</a>
 <a href="chapter-110.html" class="sidebar-chapter ">第110章：无法地带</a>
 <a href="chapter-111.html" class="sidebar-chapter ">第111章：暗黑圣战</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(81)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(81)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-82.html b/alacarte-novel-website/chapters/chapter-82.html
index 7e00b36..11fb912 100644
--- a/alacarte-novel-website/chapters/chapter-82.html
+++ b/alacarte-novel-website/chapters/chapter-82.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>卡勒特指挥部·兰蒂卢斯 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 82</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>卡勒特指挥部·兰蒂卢斯 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 82</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>阿登高地的机甲被摧毁后，林克一行人来到了卡勒特指挥部。</p>
 <p>那是一座巨大的黑色建筑，矗立在扭曲的空间中。</p>
 <p>建筑外墙覆盖着黑色的金属，散发着冰冷的气息。</p>
@@ -684,56 +683,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第八十二章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（天界篇·第十七章）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-81.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-83.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-81.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-83.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-52.html" class="sidebar-chapter ">第52章：月光酒馆·寻找阿甘左</a>
 <a href="chapter-53.html" class="sidebar-chapter ">第53章：番外·帕丽丝的誓言</a>
 <a href="chapter-54.html" class="sidebar-chapter ">第54章：觉醒之路·启程</a>
@@ -795,190 +800,211 @@
 <a href="chapter-110.html" class="sidebar-chapter ">第110章：无法地带</a>
 <a href="chapter-111.html" class="sidebar-chapter ">第111章：暗黑圣战</a>
 <a href="chapter-112.html" class="sidebar-chapter ">第112章：昔日悲鸣</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(82)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(82)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-83.html b/alacarte-novel-website/chapters/chapter-83.html
index b22d30a..aac8436 100644
--- a/alacarte-novel-website/chapters/chapter-83.html
+++ b/alacarte-novel-website/chapters/chapter-83.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>皇女的告白·天界的新篇章 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 83</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>皇女的告白·天界的新篇章 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 83</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>皇女获救的消息如同长了翅膀般传遍整个天界。根特城内，欢呼声此起彼伏，人们涌上街头庆祝战争的结束。</p>
 <p>皇宫内，却是一片微妙的气氛。</p>
 <p>"殿下，您真的要..."马琳欲言又止。</p>
@@ -633,56 +632,62 @@
 <p>月光洒在两人身上，天界的新篇章，就此开启。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第八十三章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-82.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-84.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-82.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-84.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-53.html" class="sidebar-chapter ">第53章：番外·帕丽丝的誓言</a>
 <a href="chapter-54.html" class="sidebar-chapter ">第54章：觉醒之路·启程</a>
 <a href="chapter-55.html" class="sidebar-chapter ">第55章：比尔马克帝国试验场</a>
@@ -744,190 +749,211 @@
 <a href="chapter-111.html" class="sidebar-chapter ">第111章：暗黑圣战</a>
 <a href="chapter-112.html" class="sidebar-chapter ">第112章：昔日悲鸣</a>
 <a href="chapter-113.html" class="sidebar-chapter ">第113章：凛冬</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(83)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(83)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-84.html b/alacarte-novel-website/chapters/chapter-84.html
index a904146..3ce8de3 100644
--- a/alacarte-novel-website/chapters/chapter-84.html
+++ b/alacarte-novel-website/chapters/chapter-84.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>幽灵列车·亡者的低语 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 84</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>幽灵列车·亡者的低语 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 84</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>天界战争结束后，林克在皇都休整了几天。</p>
 <p>艾丽婕正式登基成为女皇，天界迎来了和平。</p>
 <p>但林克知道，他的冒险还没有结束。</p>
@@ -640,56 +639,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第八十四章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（伊顿工业区篇·第一章）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-83.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-85.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-83.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-85.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-54.html" class="sidebar-chapter ">第54章：觉醒之路·启程</a>
 <a href="chapter-55.html" class="sidebar-chapter ">第55章：比尔马克帝国试验场</a>
 <a href="chapter-56.html" class="sidebar-chapter ">第56章：王的遗迹·远古五骑士</a>
@@ -751,190 +756,211 @@
 <a href="chapter-112.html" class="sidebar-chapter ">第112章：昔日悲鸣</a>
 <a href="chapter-113.html" class="sidebar-chapter ">第113章：凛冬</a>
 <a href="chapter-114.html" class="sidebar-chapter ">第114章：迷之觉悟</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(84)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(84)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-85.5.html b/alacarte-novel-website/chapters/chapter-85.5.html
index b21af19..6ae0e1b 100644
--- a/alacarte-novel-website/chapters/chapter-85.5.html
+++ b/alacarte-novel-website/chapters/chapter-85.5.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>剑神觉醒 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 85.5</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>剑神觉醒 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 85.5</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>克雷发电站的战斗结束后，林克独自坐在一块岩石上，望着远处的安徒恩。</p>
 <p>他的手轻轻抚摸着细雪之舞，冰蓝色的光芒在剑身上流转。但他的眉头却紧锁着。</p>
 <p>"怎么了？"米娅走过来，关切地问道，"还在为刚才的战斗担心吗？"</p>
@@ -640,240 +639,267 @@
 <p>安徒恩...你的末日到了。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第八十五点五章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-84.5.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-85.51.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(85.5)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-84.5.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-85.51.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(85.5)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-85.html b/alacarte-novel-website/chapters/chapter-85.html
index 4788f07..2b90e1b 100644
--- a/alacarte-novel-website/chapters/chapter-85.html
+++ b/alacarte-novel-website/chapters/chapter-85.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>伊顿工业区·克雷发电站 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 85</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>伊顿工业区·克雷发电站 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 85</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>穿过幽灵列车的迷雾，众人终于来到了伊顿工业区——天界的能源中心。</p>
 <p>眼前是一片巨大的工业都市，高耸的烟囱冒着白烟，无数的管道和机械构成了一幅壮观的画面。但与众不同的是，这里的空气中弥漫着一股燥热的气息，远处的天空被染成了暗红色。</p>
 <p>"这就是伊顿..."马琳感叹道，"天界的心脏。"</p>
@@ -640,56 +639,62 @@
 <p>米娅脸更红了，低下头不敢看他。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第八十五章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-84.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-86.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-84.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-86.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-55.html" class="sidebar-chapter ">第55章：比尔马克帝国试验场</a>
 <a href="chapter-56.html" class="sidebar-chapter ">第56章：王的遗迹·远古五骑士</a>
 <a href="chapter-57.html" class="sidebar-chapter ">第57章：心灵试炼·剑圣觉醒</a>
@@ -751,190 +756,211 @@
 <a href="chapter-113.html" class="sidebar-chapter ">第113章：凛冬</a>
 <a href="chapter-114.html" class="sidebar-chapter ">第114章：迷之觉悟</a>
 <a href="chapter-115.html" class="sidebar-chapter ">第115章：番外·艾丽丝的抉择</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(85)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(85)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-86.html b/alacarte-novel-website/chapters/chapter-86.html
index 22fb1f1..b0b67d9 100644
--- a/alacarte-novel-website/chapters/chapter-86.html
+++ b/alacarte-novel-website/chapters/chapter-86.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>普鲁兹发电站·闪电之帕特里斯 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 86</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>普鲁兹发电站·闪电之帕特里斯 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 86</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>克雷发电站收复后，众人马不停蹄地赶往第二座发电站——普鲁兹发电站。</p>
 <p>"普鲁兹发电站是能源中心的雷电之源。"梅尔文一边走一边解释，"这里的能源主要来源于天界的雷电云层，通过特殊的装置将雷电转化为可用能源。"</p>
 <p>"雷电..."林克看着天空，"那这里的BOSS应该和雷电有关？"</p>
@@ -612,56 +611,62 @@
 <p>"走吧。"林克握紧细雪之舞，"不管多危险，我们都要去。"</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第八十六章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-85.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-87.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-85.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-87.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-56.html" class="sidebar-chapter ">第56章：王的遗迹·远古五骑士</a>
 <a href="chapter-57.html" class="sidebar-chapter ">第57章：心灵试炼·剑圣觉醒</a>
 <a href="chapter-58.html" class="sidebar-chapter ">第58章：番外·后宫的温馨</a>
@@ -723,190 +728,211 @@
 <a href="chapter-114.html" class="sidebar-chapter ">第114章：迷之觉悟</a>
 <a href="chapter-115.html" class="sidebar-chapter ">第115章：番外·艾丽丝的抉择</a>
 <a href="chapter-116.html" class="sidebar-chapter ">第116章：番外·后宫的日常</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(86)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(86)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-87.html b/alacarte-novel-website/chapters/chapter-87.html
index 8804381..eba5201 100644
--- a/alacarte-novel-website/chapters/chapter-87.html
+++ b/alacarte-novel-website/chapters/chapter-87.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>特伦斯发电站·熔岩之萨姆 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 87</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>特伦斯发电站·熔岩之萨姆 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 87</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>普鲁兹发电站收复后，众人立即前往第三座发电站——特伦斯发电站。</p>
 <p>"特伦斯发电站是能源中心的火焰之源。"梅尔文一边走一边解释，"这里的能源主要来源于地下的岩浆，通过特殊的装置将热能转化为可用能源。"</p>
 <p>"岩浆..."林克皱眉，"那温度一定很高。"</p>
@@ -603,56 +602,62 @@
 <p>"走吧。"林克握紧细雪之舞，"不管多强，我们都要去。"</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第八十七章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-86.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-88.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-86.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-88.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-57.html" class="sidebar-chapter ">第57章：心灵试炼·剑圣觉醒</a>
 <a href="chapter-58.html" class="sidebar-chapter ">第58章：番外·后宫的温馨</a>
 <a href="chapter-59.html" class="sidebar-chapter ">第59章：敏泰的思念</a>
@@ -714,190 +719,211 @@
 <a href="chapter-115.html" class="sidebar-chapter ">第115章：番外·艾丽丝的抉择</a>
 <a href="chapter-116.html" class="sidebar-chapter ">第116章：番外·后宫的日常</a>
 <a href="chapter-117.html" class="sidebar-chapter ">第117章：番外·与赛丽亚的约会</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(87)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(87)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-88.html b/alacarte-novel-website/chapters/chapter-88.html
index 170fcf6..8757aea 100644
--- a/alacarte-novel-website/chapters/chapter-88.html
+++ b/alacarte-novel-website/chapters/chapter-88.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>格兰迪发电站·虚空之弗曼 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 88</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>格兰迪发电站·虚空之弗曼 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 88</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>三座发电站已经被收复，只剩下最后一座——格兰迪发电站。</p>
 <p>"格兰迪发电站是能源中心最大、最重要的发电站。"梅尔文严肃地说，"镇守在这里的BOSS，是安徒恩四大守护者中最强的存在——虚空之弗曼。"</p>
 <p>"虚空之弗曼？"林克问道。</p>
@@ -647,56 +646,62 @@
 <p>"安徒恩，等着我。"</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第八十六章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-87.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-89.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-87.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-89.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-58.html" class="sidebar-chapter ">第58章：番外·后宫的温馨</a>
 <a href="chapter-59.html" class="sidebar-chapter ">第59章：敏泰的思念</a>
 <a href="chapter-60.html" class="sidebar-chapter ">第60章：敏泰加入·前往诺伊佩拉</a>
@@ -758,190 +763,211 @@
 <a href="chapter-116.html" class="sidebar-chapter ">第116章：番外·后宫的日常</a>
 <a href="chapter-117.html" class="sidebar-chapter ">第117章：番外·与赛丽亚的约会</a>
 <a href="chapter-118.html" class="sidebar-chapter ">第118章：番外·与奥菲利亚的重逢</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(88)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(88)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-89.html b/alacarte-novel-website/chapters/chapter-89.html
index 6c2d6fb..90a3761 100644
--- a/alacarte-novel-website/chapters/chapter-89.html
+++ b/alacarte-novel-website/chapters/chapter-89.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>安图恩攻坚战·黑雾之源 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 89</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>安图恩攻坚战·黑雾之源 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 89</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>四座发电站全部被收复，安徒恩的能量供应被切断。但这只是开始，真正的决战才刚刚拉开序幕。</p>
 <p>"根据古代文献记载，"梅尔文在作战会议上说道，"安徒恩的周身环绕着一种特殊的黑色雾气，这种雾气不仅能阻挡视线，还蕴含着强烈的腐蚀性。只有清除黑雾，才能接近安徒恩的本体。"</p>
 <p>"怎么清除？"林克问道。</p>
@@ -654,56 +653,62 @@
 <p>"走吧...去下一个。"</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第八十七章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-88.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-90.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-88.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-90.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-59.html" class="sidebar-chapter ">第59章：敏泰的思念</a>
 <a href="chapter-60.html" class="sidebar-chapter ">第60章：敏泰加入·前往诺伊佩拉</a>
 <a href="chapter-61.html" class="sidebar-chapter ">第61章：悲鸣洞穴·阿甘左与卢克西</a>
@@ -765,190 +770,211 @@
 <a href="chapter-117.html" class="sidebar-chapter ">第117章：番外·与赛丽亚的约会</a>
 <a href="chapter-118.html" class="sidebar-chapter ">第118章：番外·与奥菲利亚的重逢</a>
 <a href="chapter-119.html" class="sidebar-chapter ">第119章：番外·与敏泰的雪山之行</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(89)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(89)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-90.html b/alacarte-novel-website/chapters/chapter-90.html
index b94a830..9510e85 100644
--- a/alacarte-novel-website/chapters/chapter-90.html
+++ b/alacarte-novel-website/chapters/chapter-90.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>安图恩攻坚战·震颤的大地 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 90</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>安图恩攻坚战·震颤的大地 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 90</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>摧毁第一个黑雾之源后，林克带领突击队马不停蹄地赶往下一个目标——震颤的大地。</p>
 <p>"震颤的大地是安徒恩的前肢所在。"米娅通过通讯器解释道，"如果不切断它，安徒恩就能用前肢攻击我们。"</p>
 <p>"明白。"林克点头，"全速前进！"</p>
@@ -609,56 +608,62 @@
 <p>"安徒恩，你的末日就要到了。"</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第八十八章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-89.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-91.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-89.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-91.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-60.html" class="sidebar-chapter ">第60章：敏泰加入·前往诺伊佩拉</a>
 <a href="chapter-61.html" class="sidebar-chapter ">第61章：悲鸣洞穴·阿甘左与卢克西</a>
 <a href="chapter-62.html" class="sidebar-chapter ">第62章：战前准备·痛苦之村的情报</a>
@@ -720,190 +725,211 @@
 <a href="chapter-118.html" class="sidebar-chapter ">第118章：番外·与奥菲利亚的重逢</a>
 <a href="chapter-119.html" class="sidebar-chapter ">第119章：番外·与敏泰的雪山之行</a>
 <a href="chapter-120.html" class="sidebar-chapter ">第120章：番外·与莎兰的魔法时光</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(90)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(90)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-91.html b/alacarte-novel-website/chapters/chapter-91.html
index e39e86f..cadead4 100644
--- a/alacarte-novel-website/chapters/chapter-91.html
+++ b/alacarte-novel-website/chapters/chapter-91.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>安图恩攻坚战·擎天之柱 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 91</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>安图恩攻坚战·擎天之柱 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 91</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>切断安徒恩的前肢后，林克带领突击队赶往下一个目标——擎天之柱。</p>
 <p>"擎天之柱是安徒恩的后腿所在。"米娅解释道，"比前肢更加坚固，也更加危险。"</p>
 <p>"不管多危险，都要切断它。"林克说。</p>
@@ -600,56 +599,62 @@
 <p>"走吧...去摧毁最后的黑雾之源..."</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第八十九章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-90.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-92.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-90.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-92.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-61.html" class="sidebar-chapter ">第61章：悲鸣洞穴·阿甘左与卢克西</a>
 <a href="chapter-62.html" class="sidebar-chapter ">第62章：战前准备·痛苦之村的情报</a>
 <a href="chapter-63.html" class="sidebar-chapter ">第63章：痛苦之村列瑟芬·狄瑞吉的真身</a>
@@ -711,190 +716,211 @@
 <a href="chapter-119.html" class="sidebar-chapter ">第119章：番外·与敏泰的雪山之行</a>
 <a href="chapter-120.html" class="sidebar-chapter ">第120章：番外·与莎兰的魔法时光</a>
 <a href="chapter-121.html" class="sidebar-chapter ">第121章：番外·与帕丽丝的格斗训练</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(91)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(91)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-92.html b/alacarte-novel-website/chapters/chapter-92.html
index 3c5470a..a14844d 100644
--- a/alacarte-novel-website/chapters/chapter-92.html
+++ b/alacarte-novel-website/chapters/chapter-92.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>安图恩攻坚战·黑色火山 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 92</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>安图恩攻坚战·黑色火山 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 92</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>摧毁所有黑雾之源，切断安徒恩的四肢后，第一阶段终于完成。</p>
 <p>"现在进入第二阶段——灭杀安徒恩！"梅尔文通过通讯器说道，"林克，你们需要通过传送装置进入安徒恩体内，摧毁它的心脏！"</p>
 <p>"明白。"林克点头。</p>
@@ -612,56 +611,62 @@
 <p>"来吧，安徒恩！让我看看使徒的真正力量！"</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第九十章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-91.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-93.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-91.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-93.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-62.html" class="sidebar-chapter ">第62章：战前准备·痛苦之村的情报</a>
 <a href="chapter-63.html" class="sidebar-chapter ">第63章：痛苦之村列瑟芬·狄瑞吉的真身</a>
 <a href="chapter-64.html" class="sidebar-chapter ">第64章：胜利归来·赫顿玛尔的庆祝</a>
@@ -723,190 +728,211 @@
 <a href="chapter-120.html" class="sidebar-chapter ">第120章：番外·与莎兰的魔法时光</a>
 <a href="chapter-121.html" class="sidebar-chapter ">第121章：番外·与帕丽丝的格斗训练</a>
 <a href="chapter-122.html" class="sidebar-chapter ">第122章：番外·与莫纳亨的念动力</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(92)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(92)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-93.html b/alacarte-novel-website/chapters/chapter-93.html
index 2cbd9c3..f275664 100644
--- a/alacarte-novel-website/chapters/chapter-93.html
+++ b/alacarte-novel-website/chapters/chapter-93.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>安图恩攻坚战·使徒陨落 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 93</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>安图恩攻坚战·使徒陨落 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 93</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>林克挡在安徒恩的心脏前，为米娅争取时间。</p>
 <p>"还有八分钟！"米娅的声音从通讯器中传来，"林克，您一定要坚持住！"</p>
 <p>"放心！"林克握紧细雪之舞，"我不会倒下的！"</p>
@@ -628,56 +627,62 @@
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第九十一章完）</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（安图恩攻坚战篇 完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-92.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-94.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-92.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-94.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-63.html" class="sidebar-chapter ">第63章：痛苦之村列瑟芬·狄瑞吉的真身</a>
 <a href="chapter-64.html" class="sidebar-chapter ">第64章：胜利归来·赫顿玛尔的庆祝</a>
 <a href="chapter-65.html" class="sidebar-chapter ">第65章：正宫的专属时光·赛丽亚的深情</a>
@@ -739,190 +744,211 @@
 <a href="chapter-121.html" class="sidebar-chapter ">第121章：番外·与帕丽丝的格斗训练</a>
 <a href="chapter-122.html" class="sidebar-chapter ">第122章：番外·与莫纳亨的念动力</a>
 <a href="chapter-123.html" class="sidebar-chapter ">第123章：番外·与泽丁的天界巡逻</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(93)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(93)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-94.html b/alacarte-novel-website/chapters/chapter-94.html
index c2c30e5..2c23274 100644
--- a/alacarte-novel-website/chapters/chapter-94.html
+++ b/alacarte-novel-website/chapters/chapter-94.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>克洛诺斯岛·寂静城的召唤 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 94</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>克洛诺斯岛·寂静城的召唤 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 94</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>天界，皇宫。</p>
 <p>林克站在阳台上，望着远方的天空。使徒安徒恩已经被消灭，天界终于恢复了和平。但他的心中却隐隐有些不安。</p>
 <p>"林克，您在想什么？"米娅走到他身边，轻轻挽住他的手臂。</p>
@@ -659,56 +658,62 @@
 <p>"因为您不是敌人。"林克说道，"您只是一个想要活下去的老人。"</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第九十二章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-93.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-95.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-93.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-95.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-64.html" class="sidebar-chapter ">第64章：胜利归来·赫顿玛尔的庆祝</a>
 <a href="chapter-65.html" class="sidebar-chapter ">第65章：正宫的专属时光·赛丽亚的深情</a>
 <a href="chapter-66.html" class="sidebar-chapter ">第66章：番外·五人同床·后宫大被同眠</a>
@@ -770,190 +775,211 @@
 <a href="chapter-122.html" class="sidebar-chapter ">第122章：番外·与莫纳亨的念动力</a>
 <a href="chapter-123.html" class="sidebar-chapter ">第123章：番外·与泽丁的天界巡逻</a>
 <a href="chapter-124.html" class="sidebar-chapter ">第124章：番外·与马琳的骑士之道</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(94)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(94)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-95.html b/alacarte-novel-website/chapters/chapter-95.html
index b8a248d..d7113e1 100644
--- a/alacarte-novel-website/chapters/chapter-95.html
+++ b/alacarte-novel-website/chapters/chapter-95.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>寂静城的秘密 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 95</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>寂静城的秘密 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 95</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>寂静城，核心区域。</p>
 <p>林克站在卢克面前，心中思绪万千。眼前这个虚弱的老人，就是第七使徒——制造者卢克。</p>
 <p>「年轻人...」卢克缓缓开口，「你真的愿意帮我？」</p>
@@ -677,56 +676,62 @@
 <p>「有点意思...」林克眼中闪过一丝战意，「那就让我看看，你们到底有多强！」</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第九十三章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-94.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-96.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-94.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-96.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-65.html" class="sidebar-chapter ">第65章：正宫的专属时光·赛丽亚的深情</a>
 <a href="chapter-66.html" class="sidebar-chapter ">第66章：番外·五人同床·后宫大被同眠</a>
 <a href="chapter-67.html" class="sidebar-chapter ">第67章：热血八番街·火箭侠的阴谋</a>
@@ -788,190 +793,211 @@
 <a href="chapter-123.html" class="sidebar-chapter ">第123章：番外·与泽丁的天界巡逻</a>
 <a href="chapter-124.html" class="sidebar-chapter ">第124章：番外·与马琳的骑士之道</a>
 <a href="chapter-125.html" class="sidebar-chapter ">第125章：番外·与皇女的皇家约会</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(95)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(95)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-96.html b/alacarte-novel-website/chapters/chapter-96.html
index a2c57cd..e19e205 100644
--- a/alacarte-novel-website/chapters/chapter-96.html
+++ b/alacarte-novel-website/chapters/chapter-96.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>番外·贝奇的献身 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 96</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>番外·贝奇的献身 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 96</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>寂静城，核心实验室。</p>
 <p>战斗结束后，林克独自站在巨大的容器前，看着沉睡中的贝奇。艾泽拉和米娅已经护送卢克去休息了，偌大的实验室只剩下他们两人。</p>
 <p>容器中的少女依然漂浮着，银白色的短发在水中轻轻飘动，淡紫色的眼睛透过玻璃注视着他，目光中带着好奇、感激，以及一种说不清道不明的情感。</p>
@@ -657,56 +656,62 @@
 <p>而这，只是她新生活的开始。</p>
 <p>窗外，天界的光芒温柔地洒进来，照亮了两人的身影。在这个充满奇迹的世界里，爱不分种族，不分形态，只要心是真的，一切都是可能的。</p>
 <p>贝奇闭上眼睛，在林克的怀抱中沉沉睡去。这是她有生以来第一次，感受到了真正的幸福与安宁。</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-95.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-97.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-95.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-97.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-66.html" class="sidebar-chapter ">第66章：番外·五人同床·后宫大被同眠</a>
 <a href="chapter-67.html" class="sidebar-chapter ">第67章：热血八番街·火箭侠的阴谋</a>
 <a href="chapter-68.html" class="sidebar-chapter ">第68章：绿都格罗兹尼·魔雷者莫纳亨</a>
@@ -768,190 +773,211 @@
 <a href="chapter-124.html" class="sidebar-chapter ">第124章：番外·与马琳的骑士之道</a>
 <a href="chapter-125.html" class="sidebar-chapter ">第125章：番外·与皇女的皇家约会</a>
 <a href="chapter-126.html" class="sidebar-chapter ">第126章：番外·与米娅的工坊时光</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(96)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(96)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-97.html b/alacarte-novel-website/chapters/chapter-97.html
index fbe43c5..d062371 100644
--- a/alacarte-novel-website/chapters/chapter-97.html
+++ b/alacarte-novel-website/chapters/chapter-97.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>光之舞会 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 97</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>光之舞会 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 97</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>寂静城，光之舞会区域。</p>
 <p>林克站在巨大的金属平台上，环顾四周。这里与之前的区域完全不同——无数水晶吊灯从穹顶垂下，散发着柔和的金色光芒。地面上铺着光滑的大理石，倒映着灯光，仿佛置身于一个巨大的舞池。</p>
 <p>「这里就是...光之舞会？」米娅惊叹道，「好美...不像是在寂静城里...」</p>
@@ -691,56 +690,62 @@
 <p>为了卢克，为了贝奇，为了所有相信他的人们。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第九十五章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-96.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-98.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-96.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-98.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-67.html" class="sidebar-chapter ">第67章：热血八番街·火箭侠的阴谋</a>
 <a href="chapter-68.html" class="sidebar-chapter ">第68章：绿都格罗兹尼·魔雷者莫纳亨</a>
 <a href="chapter-69.html" class="sidebar-chapter ">第69章：魔雷者的苏醒·莫纳亨的抉择</a>
@@ -802,190 +807,211 @@
 <a href="chapter-125.html" class="sidebar-chapter ">第125章：番外·与皇女的皇家约会</a>
 <a href="chapter-126.html" class="sidebar-chapter ">第126章：番外·与米娅的工坊时光</a>
 <a href="chapter-127.html" class="sidebar-chapter ">第127章：番外·与贝奇的人造之心</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(97)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(97)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-98.html b/alacarte-novel-website/chapters/chapter-98.html
index 9e5fafa..f1c40f6 100644
--- a/alacarte-novel-website/chapters/chapter-98.html
+++ b/alacarte-novel-website/chapters/chapter-98.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>钢铁之臂 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 98</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>钢铁之臂 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 98</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>寂静城，核心实验室。</p>
 <p>林克将光之根源缓缓放入古老能量核心的凹槽中。金色的光芒瞬间爆发，整个实验室都被照亮。</p>
 <p>「开始激活了！」贝奇惊喜地叫道。</p>
@@ -653,56 +652,62 @@
 <p>古老能量核心的光芒温柔地照耀着两人，仿佛在为他们的爱情祝福。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第九十六章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-97.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-99.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-97.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-99.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-68.html" class="sidebar-chapter ">第68章：绿都格罗兹尼·魔雷者莫纳亨</a>
 <a href="chapter-69.html" class="sidebar-chapter ">第69章：魔雷者的苏醒·莫纳亨的抉择</a>
 <a href="chapter-70.html" class="sidebar-chapter ">第70章：天界之门·根特外围的战火</a>
@@ -764,190 +769,211 @@
 <a href="chapter-126.html" class="sidebar-chapter ">第126章：番外·与米娅的工坊时光</a>
 <a href="chapter-127.html" class="sidebar-chapter ">第127章：番外·与贝奇的人造之心</a>
 <a href="chapter-128.html" class="sidebar-chapter ">第128章：番外·与艾泽拉的守护誓言</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(98)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(98)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/chapters/chapter-99.html b/alacarte-novel-website/chapters/chapter-99.html
index 5df8345..ca17c9b 100644
--- a/alacarte-novel-website/chapters/chapter-99.html
+++ b/alacarte-novel-website/chapters/chapter-99.html
@@ -1,551 +1,550 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>能源熔炉 - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">Chapter 99</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>能源熔炉 - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">Chapter 99</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
 <p>寂静城，核心实验室。</p>
 <p>古老能量核心稳定地运转着，散发出柔和的蓝金色光芒。卢克坐在核心旁边，感受着体内久违的平静。</p>
 <p>「多少年了...」他喃喃自语，「终于不用再承受那种痛苦了...」</p>
@@ -624,56 +623,62 @@
 <p>赫尔德...那个一切的幕后黑手，还在等待着。</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0;">···</p>
 <p style="text-align: center; color: var(--text-secondary); text-indent: 0; margin-top: 2em;">（第九十七章完）</p>
-
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="chapter-98.html" class="nav-btn ">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="chapter-100.html" class="nav-btn ">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
+
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="chapter-98.html" class="nav-btn ">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="chapter-100.html" class="nav-btn ">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
 <a href="chapter-69.html" class="sidebar-chapter ">第69章：魔雷者的苏醒·莫纳亨的抉择</a>
 <a href="chapter-70.html" class="sidebar-chapter ">第70章：天界之门·根特外围的战火</a>
 <a href="chapter-71.html" class="sidebar-chapter ">第71章：根特北门·泽丁的誓言</a>
@@ -735,190 +740,211 @@
 <a href="chapter-127.html" class="sidebar-chapter ">第127章：番外·与贝奇的人造之心</a>
 <a href="chapter-128.html" class="sidebar-chapter ">第128章：番外·与艾泽拉的守护誓言</a>
 <a href="chapter-129.html" class="sidebar-chapter ">第129章：魔界的召唤</a>
-
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes(99)) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes(99)) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
diff --git a/alacarte-novel-website/template.html b/alacarte-novel-website/template.html
index abe5a5c..a6afeed 100644
--- a/alacarte-novel-website/template.html
+++ b/alacarte-novel-website/template.html
@@ -1,785 +1,811 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>{{CHAPTER_TITLE}} - 阿拉德：剑之回响</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
-            --text-primary: #e0e0e0;
-            --text-secondary: #888;
-            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --border-color: rgba(255,255,255,0.1);
-            --btn-bg: rgba(255,255,255,0.1);
-            --btn-hover: rgba(255,255,255,0.2);
-        }
-        
-        [data-theme="light"] {
-            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-            --text-primary: #333;
-            --text-secondary: #666;
-            --border-color: rgba(0,0,0,0.1);
-            --btn-bg: rgba(0,0,0,0.05);
-            --btn-hover: rgba(0,0,0,0.1);
-        }
-        
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        
-        body {
-            font-family: 'Noto Serif SC', serif;
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.8;
-            min-height: 100vh;
-            transition: all 0.3s ease;
-        }
-        
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
-            padding-bottom: 120px;
-        }
-        
-        /* 顶部导航 */
-        .top-nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 10px 20px;
-        }
-        
-        .top-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-link {
-            color: var(--text-primary);
-            text-decoration: none;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            padding: 8px 16px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            transition: all 0.3s ease;
-        }
-        
-        .nav-link:hover {
-            background: var(--btn-hover);
-        }
-        
-        .chapter-header {
-            text-align: center;
-            padding: 80px 0 40px;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 40px;
-        }
-        
-        .chapter-number {
-            font-size: 14px;
-            color: var(--text-secondary);
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            margin-bottom: 10px;
-        }
-        
-        .chapter-title {
-            font-size: 32px;
-            font-weight: 700;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-        
-        .chapter-meta {
-            font-size: 14px;
-            color: var(--text-secondary);
-        }
-        
-        .chapter-content {
-            font-size: 18px;
-            line-height: 2;
-            text-align: justify;
-        }
-        
-        .chapter-content p {
-            margin-bottom: 1.5em;
-            text-indent: 2em;
-        }
-        
-        .chapter-content p:first-of-type::first-letter {
-            font-size: 3em;
-            float: left;
-            line-height: 1;
-            margin-right: 8px;
-            margin-top: -5px;
-            background: var(--accent-gradient);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            font-weight: 700;
-        }
-        
-        /* 固定底部导航 */
-        .fixed-nav {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0,0,0,0.3);
-            backdrop-filter: blur(10px);
-            border-top: 1px solid var(--border-color);
-            z-index: 1000;
-            padding: 15px 20px;
-        }
-        
-        .fixed-nav-content {
-            max-width: 800px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .nav-btn {
-            padding: 12px 24px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            color: var(--text-primary);
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        .nav-btn:hover {
-            background: var(--btn-hover);
-            transform: translateY(-2px);
-        }
-        
-        .nav-btn.disabled {
-            opacity: 0.3;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-        
-        /* 右侧滚动按钮 */
-        .scroll-buttons {
-            position: fixed;
-            right: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1001;
-        }
-        
-        .scroll-btn {
-            width: 40px;
-            height: 40px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 16px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .scroll-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        /* TTS控制面板 */
-        .tts-panel {
-            position: fixed;
-            left: 20px;
-            bottom: 90px;
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            z-index: 1002;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            padding: 15px;
-            min-width: 180px;
-        }
-        
-        .tts-title {
-            font-size: 12px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            margin-bottom: 5px;
-        }
-        
-        .tts-controls {
-            display: flex;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-btn {
-            width: 36px;
-            height: 36px;
-            border-radius: 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-            transition: all 0.3s ease;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-btn:hover {
-            background: var(--btn-hover);
-        }
-        
-        .tts-btn.active {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-color: #667eea;
-        }
-        
-        .tts-progress {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            margin-bottom: 10px;
-        }
-        
-        .tts-progress-bar {
-            flex: 1;
-            height: 4px;
-            background: var(--btn-bg);
-            border-radius: 2px;
-            overflow: hidden;
-        }
-        
-        .tts-progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            width: 0%;
-            transition: width 0.1s ease;
-        }
-        
-        .tts-time {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-            min-width: 80px;
-        }
-        
-        .tts-speed {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .tts-speed-label {
-            font-size: 12px;
-            color: var(--text-secondary);
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        .tts-speed-select {
-            padding: 4px 8px;
-            background: var(--btn-bg);
-            border: 1px solid var(--border-color);
-            border-radius: 4px;
-            color: var(--text-primary);
-            font-size: 12px;
-            cursor: pointer;
-            font-family: 'Noto Sans SC', sans-serif;
-        }
-        
-        @media (max-width: 600px) {
-            .tts-panel {
-                left: 10px;
-                right: 10px;
-                bottom: auto;
-                top: 60px;
-                min-width: auto;
-                padding: 12px;
-                width: auto;
-                z-index: 1003;
-            }
-            
-            .tts-btn {
-                width: 32px;
-                height: 32px;
-                font-size: 12px;
-            }
-            
-            .tts-title {
-                font-size: 11px;
-            }
-            
-            .tts-speed-label {
-                font-size: 11px;
-            }
-            
-            .tts-speed-select {
-                padding: 3px 6px;
-                font-size: 11px;
-            }
-            
-            .tts-time {
-                font-size: 11px;
-                min-width: 60px;
-            }
-            
-            /* 手机端隐藏滚动按钮，给TTS腾空间 */
-            .scroll-buttons {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 400px) {
-            .tts-panel {
-                top: 55px;
-                padding: 10px;
-            }
-            
-            .tts-controls {
-                gap: 6px;
-            }
-            
-            .tts-btn {
-                width: 28px;
-                height: 28px;
-                font-size: 11px;
-            }
-        }
-        
-        /* 侧边栏 - 标题固定，内容滚动 */
-        .sidebar {
-            position: fixed;
-            right: 20px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: rgba(0,0,0,0.5);
-            backdrop-filter: blur(10px);
-            border-radius: 12px;
-            border: 1px solid var(--border-color);
-            width: 200px;
-            max-height: 70vh;
-            z-index: 999;
-            display: flex;
-            flex-direction: column;
-        }
-        
-        .sidebar-title {
-            font-size: 14px;
-            color: var(--text-secondary);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            padding: 15px 20px;
-            border-bottom: 1px solid var(--border-color);
-            flex-shrink: 0;
-        }
-        
-        .sidebar-content {
-            overflow-y: auto;
-            padding: 10px 20px 20px;
-            flex: 1;
-            scrollbar-width: thin;
-            scrollbar-color: transparent transparent;
-            transition: scrollbar-color 0.3s ease;
-        }
-        
-        .sidebar-content:hover {
-            scrollbar-color: rgba(255,255,255,0.3) transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar {
-            width: 6px;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar-content::-webkit-scrollbar-thumb {
-            background: transparent;
-            border-radius: 3px;
-            transition: background 0.3s ease;
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.3);
-        }
-        
-        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(255,255,255,0.5);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover {
-            scrollbar-color: rgba(0,0,0,0.3) transparent;
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
-            background: rgba(0,0,0,0.3);
-        }
-        
-        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
-            background: rgba(0,0,0,0.5);
-        }
-        
-        .sidebar-chapter {
-            display: block;
-            padding: 8px 0;
-            color: #aaa;
-            text-decoration: none;
-            font-size: 13px;
-            border-bottom: 1px solid rgba(255,255,255,0.05);
-            transition: all 0.3s ease;
-            line-height: 1.5;
-        }
-        
-        .sidebar-chapter:hover {
-            color: #667eea;
-        }
-        
-        .sidebar-chapter.current {
-            color: #667eea;
-            font-weight: 600;
-        }
-        
-        @media (max-width: 1200px) {
-            .sidebar {
-                display: none;
-            }
-        }
-        
-        @media (max-width: 600px) {
-            .chapter-title {
-                font-size: 24px;
-            }
-            
-            .chapter-content {
-                font-size: 16px;
-            }
-            
-            .fixed-nav-content {
-                gap: 10px;
-            }
-            
-            .nav-btn {
-                padding: 10px 15px;
-                font-size: 12px;
-            }
-            
-            .scroll-buttons {
-                right: 10px;
-                bottom: 80px;
-            }
-            
-            .scroll-btn {
-                width: 36px;
-                height: 36px;
-            }
-        }
-        
-        /* 滚动条样式 */
-        .sidebar::-webkit-scrollbar {
-            width: 4px;
-        }
-        
-        .sidebar::-webkit-scrollbar-track {
-            background: transparent;
-        }
-        
-        .sidebar::-webkit-scrollbar-thumb {
-            background: rgba(255,255,255,0.2);
-            border-radius: 2px;
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
-    <nav class="top-nav">
-        <div class="top-nav-content">
-            <a href="../index.html" class="nav-link">返回首页</a>
-            <button class="nav-link" id="themeToggle">切换主题</button>
-        </div>
-    </nav>
-
-    <div class="container">
-        <header class="chapter-header">
-            <div class="chapter-number">{{CHAPTER_NUMBER}}</div>
-            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
-        </header>
-        
-        <article class="chapter-content">
-{{CHAPTER_CONTENT}}
-        </article>
-    </div>
-    
-    <!-- 固定底部导航 -->
-    <nav class="fixed-nav">
-        <div class="fixed-nav-content">
-            <a href="{{PREV_CHAPTER}}" class="nav-btn {{PREV_DISABLED}}">上一章</a>
-            <a href="../chapters.html" class="nav-btn">目录</a>
-            <a href="{{NEXT_CHAPTER}}" class="nav-btn {{NEXT_DISABLED}}">下一章</a>
-        </div>
-    </nav>
-    
-    <!-- 右侧滚动按钮 -->
-    <div class="scroll-buttons">
-        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
-        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
-    </div>
-    
-    <!-- TTS语音朗读面板 -->
-    <div class="tts-panel" id="ttsPanel">
-        <div class="tts-title">语音朗读</div>
-        <div class="tts-controls">
-            <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
-            <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
-            <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
-        </div>
-        <div class="tts-progress">
-            <div class="tts-progress-bar">
-                <div class="tts-progress-fill" id="ttsProgressFill"></div>
-            </div>
-            <div class="tts-time" id="ttsTime">0 / 0</div>
-        </div>
-        <div class="tts-speed">
-            <span class="tts-speed-label">速度:</span>
-            <select class="tts-speed-select" id="ttsSpeed">
-                <option value="0.5">慢速</option>
-                <option value="0.75">较慢</option>
-                <option value="1" selected>正常</option>
-                <option value="1.25">较快</option>
-                <option value="1.5">快速</option>
-                <option value="2">极速</option>
-            </select>
-        </div>
-    </div>
-    
-    <!-- 侧边栏章节导航 -->
-    <aside class="sidebar">
-        <div class="sidebar-title">章节导航</div>
-        <div class="sidebar-content" id="sidebarContent">
-{{SIDEBAR_CHAPTERS}}
-        </div>
-    </aside>
-
-    <script>
-        // 记录阅读进度
-        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
-        if (!readChapters.includes({{CHAPTER_ID}})) {
-            readChapters.push({{CHAPTER_ID}});
-            localStorage.setItem('readChapters', JSON.stringify(readChapters));
-        }
-        
-        // 主题切换
-        const themeToggle = document.getElementById('themeToggle');
-        const savedTheme = localStorage.getItem('theme') || 'dark';
-        document.documentElement.setAttribute('data-theme', savedTheme);
-        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
-        
-        themeToggle.addEventListener('click', () => {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
-        });
-        
-        // 滚动到顶部
-        document.getElementById('scrollTop').addEventListener('click', () => {
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-        });
-        
-        // 滚动到底部
-        document.getElementById('scrollBottom').addEventListener('click', () => {
-            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
-        });
-        
-        // 页面加载时，侧边栏自动滚动到当前章节
-        window.addEventListener('load', () => {
-            const sidebarContent = document.getElementById('sidebarContent');
-            const currentChapter = sidebarContent.querySelector('.current');
-            if (currentChapter) {
-                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
-            }
-        });
-        
-        // ========== TTS语音朗读功能 ==========
-        let ttsSynth = window.speechSynthesis;
-        let ttsUtterance = null;
-        let ttsText = '';
-        let ttsSentences = [];
-        let ttsCurrentIndex = 0;
-        let ttsIsPlaying = false;
-        let ttsIsPaused = false;
-        let ttsSpeed = 1;
-        
-        // 初始化：提取章节内容
-        function initTTS() {
-            const contentEl = document.querySelector('.chapter-content');
-            if (!contentEl) return;
-            
-            // 获取所有段落文本，清理HTML标签
-            ttsText = contentEl.innerText || contentEl.textContent;
-            // 分割成句子（中文按句号、问号、感叹号分割）
-            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
-            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
-            
-            updateTTSProgress();
-        }
-        
-        // 更新进度显示
-        function updateTTSProgress() {
-            const total = ttsSentences.length;
-            const current = ttsCurrentIndex;
-            document.getElementById('ttsTime').textContent = `${current} / ${total}`;
-            const percent = total > 0 ? (current / total * 100) : 0;
-            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
-        }
-        
-        // 播放当前句子
-        function playCurrentSentence() {
-            if (ttsCurrentIndex >= ttsSentences.length) {
-                stopTTS();
-                return;
-            }
-            
-            const text = ttsSentences[ttsCurrentIndex].trim();
-            ttsUtterance = new SpeechSynthesisUtterance(text);
-            ttsUtterance.lang = 'zh-CN';
-            ttsUtterance.rate = ttsSpeed;
-            
-            // 尝试选择中文语音
-            const voices = ttsSynth.getVoices();
-            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
-            if (zhVoice) {
-                ttsUtterance.voice = zhVoice;
-            }
-            
-            ttsUtterance.onend = () => {
-                if (ttsIsPlaying && !ttsIsPaused) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsUtterance.onerror = (e) => {
-                console.error('TTS error:', e);
-                if (ttsIsPlaying) {
-                    ttsCurrentIndex++;
-                    updateTTSProgress();
-                    playCurrentSentence();
-                }
-            };
-            
-            ttsSynth.speak(ttsUtterance);
-        }
-        
-        // 播放
-        function playTTS() {
-            if (ttsSentences.length === 0) {
-                initTTS();
-            }
-            
-            if (ttsIsPaused) {
-                ttsSynth.resume();
-                ttsIsPaused = false;
-            } else {
-                ttsIsPlaying = true;
-                playCurrentSentence();
-            }
-            
-            document.getElementById('ttsPlay').classList.add('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 暂停
-        function pauseTTS() {
-            if (ttsIsPlaying) {
-                ttsSynth.pause();
-                ttsIsPaused = true;
-                document.getElementById('ttsPlay').classList.remove('active');
-                document.getElementById('ttsPause').classList.add('active');
-            }
-        }
-        
-        // 停止
-        function stopTTS() {
-            ttsSynth.cancel();
-            ttsIsPlaying = false;
-            ttsIsPaused = false;
-            ttsCurrentIndex = 0;
-            updateTTSProgress();
-            document.getElementById('ttsPlay').classList.remove('active');
-            document.getElementById('ttsPause').classList.remove('active');
-        }
-        
-        // 设置速度
-        function setTTSSpeed(speed) {
-            ttsSpeed = parseFloat(speed);
-            // 如果正在播放，需要重新开始当前句子
-            if (ttsIsPlaying && !ttsIsPaused) {
-                ttsSynth.cancel();
-                playCurrentSentence();
-            }
-        }
-        
-        // 绑定事件
-        document.getElementById('ttsPlay').addEventListener('click', playTTS);
-        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
-        document.getElementById('ttsStop').addEventListener('click', stopTTS);
-        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
-        
-        // 加载语音列表（某些浏览器需要异步加载）
-        if (speechSynthesis.onvoiceschanged !== undefined) {
-            speechSynthesis.onvoiceschanged = initTTS;
-        }
-        
-        // 页面加载时初始化
-        window.addEventListener('load', () => {
-            initTTS();
-        });
-        
-        // 页面离开时停止播放
-        window.addEventListener('beforeunload', stopTTS);
-    </script>
-</body>
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>{{CHAPTER_TITLE}} - 阿拉德：剑之回响</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-primary: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
+            --text-primary: #e0e0e0;
+            --text-secondary: #888;
+            --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --border-color: rgba(255,255,255,0.1);
+            --btn-bg: rgba(255,255,255,0.1);
+            --btn-hover: rgba(255,255,255,0.2);
+        }
+        
+        [data-theme="light"] {
+            --bg-primary: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+            --text-primary: #333;
+            --text-secondary: #666;
+            --border-color: rgba(0,0,0,0.1);
+            --btn-bg: rgba(0,0,0,0.05);
+            --btn-hover: rgba(0,0,0,0.1);
+        }
+        
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Noto Serif SC', serif;
+            background: var(--bg-primary);
+            color: var(--text-primary);
+            line-height: 1.8;
+            min-height: 100vh;
+            transition: all 0.3s ease;
+        }
+        
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: 120px;
+        }
+        
+        /* 顶部导航 */
+        .top-nav {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 10px 20px;
+        }
+        
+        .top-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-link {
+            color: var(--text-primary);
+            text-decoration: none;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-link:hover {
+            background: var(--btn-hover);
+        }
+        
+        .chapter-header {
+            text-align: center;
+            padding: 80px 0 40px;
+            border-bottom: 1px solid var(--border-color);
+            margin-bottom: 40px;
+        }
+        
+        .chapter-number {
+            font-size: 14px;
+            color: var(--text-secondary);
+            letter-spacing: 4px;
+            text-transform: uppercase;
+            margin-bottom: 10px;
+        }
+        
+        .chapter-title {
+            font-size: 32px;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 20px;
+        }
+        
+        .chapter-meta {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        
+        .chapter-content {
+            font-size: 18px;
+            line-height: 2;
+            text-align: justify;
+        }
+        
+        .chapter-content p {
+            margin-bottom: 1.5em;
+            text-indent: 2em;
+        }
+        
+        .chapter-content p:first-of-type::first-letter {
+            font-size: 3em;
+            float: left;
+            line-height: 1;
+            margin-right: 8px;
+            margin-top: -5px;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            font-weight: 700;
+        }
+        
+        /* 固定底部导航 */
+        .fixed-nav {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: rgba(0,0,0,0.3);
+            backdrop-filter: blur(10px);
+            border-top: 1px solid var(--border-color);
+            z-index: 1000;
+            padding: 15px 20px;
+        }
+        
+        .fixed-nav-content {
+            max-width: 800px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .nav-btn {
+            padding: 12px 24px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            text-decoration: none;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        .nav-btn:hover {
+            background: var(--btn-hover);
+            transform: translateY(-2px);
+        }
+        
+        .nav-btn.disabled {
+            opacity: 0.3;
+            cursor: not-allowed;
+            pointer-events: none;
+        }
+        
+        .nav-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+        }
+        
+        /* 右侧滚动按钮 */
+        .scroll-buttons {
+            position: fixed;
+            right: 20px;
+            bottom: 90px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            z-index: 1001;
+        }
+        
+        .scroll-btn {
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 16px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .scroll-btn:hover {
+            background: var(--btn-hover);
+        }
+        
+        /* TTS弹出面板 */
+        .tts-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.5);
+            z-index: 2000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .tts-overlay.show {
+            display: flex;
+        }
+        
+        .tts-panel {
+            background: rgba(30,30,50,0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            padding: 24px;
+            width: 90%;
+            max-width: 400px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .tts-panel {
+            background: rgba(255,255,255,0.95);
+        }
+        
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding-bottom: 15px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .tts-title {
+            font-size: 18px;
+            font-weight: 600;
+            color: var(--text-primary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-close {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            transition: all 0.3s ease;
+        }
+        
+        .tts-close:hover {
+            background: var(--btn-hover);
+        }
+        
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            margin-bottom: 20px;
+        }
+        
+        .tts-btn {
+            width: 56px;
+            height: 56px;
+            border-radius: 50%;
+            background: var(--btn-bg);
+            border: 2px solid var(--border-color);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            transition: all 0.3s ease;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-btn:hover {
+            background: var(--btn-hover);
+            transform: scale(1.1);
+        }
+        
+        .tts-btn.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-color: #667eea;
+            transform: scale(1.1);
+        }
+        
+        .tts-progress {
+            margin-bottom: 20px;
+        }
+        
+        .tts-progress-bar {
+            height: 6px;
+            background: var(--btn-bg);
+            border-radius: 3px;
+            overflow: hidden;
+            margin-bottom: 8px;
+        }
+        
+        .tts-progress-fill {
+            height: 100%;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+        
+        .tts-time {
+            font-size: 13px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+            text-align: center;
+        }
+        
+        .tts-speed {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+        }
+        
+        .tts-speed-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        .tts-speed-select {
+            padding: 8px 16px;
+            background: var(--btn-bg);
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            color: var(--text-primary);
+            font-size: 14px;
+            cursor: pointer;
+            font-family: 'Noto Sans SC', sans-serif;
+        }
+        
+        /* 侧边栏 - 标题固定，内容滚动 */
+        .sidebar {
+            position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: rgba(0,0,0,0.5);
+            backdrop-filter: blur(10px);
+            border-radius: 12px;
+            border: 1px solid var(--border-color);
+            width: 200px;
+            max-height: 70vh;
+            z-index: 999;
+            display: flex;
+            flex-direction: column;
+        }
+        
+        .sidebar-title {
+            font-size: 14px;
+            color: var(--text-secondary);
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            padding: 15px 20px;
+            border-bottom: 1px solid var(--border-color);
+            flex-shrink: 0;
+        }
+        
+        .sidebar-content {
+            overflow-y: auto;
+            padding: 10px 20px 20px;
+            flex: 1;
+            scrollbar-width: thin;
+            scrollbar-color: transparent transparent;
+            transition: scrollbar-color 0.3s ease;
+        }
+        
+        .sidebar-content:hover {
+            scrollbar-color: rgba(255,255,255,0.3) transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar {
+            width: 6px;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar-content::-webkit-scrollbar-thumb {
+            background: transparent;
+            border-radius: 3px;
+            transition: background 0.3s ease;
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.3);
+        }
+        
+        .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(255,255,255,0.5);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover {
+            scrollbar-color: rgba(0,0,0,0.3) transparent;
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb {
+            background: rgba(0,0,0,0.3);
+        }
+        
+        [data-theme="light"] .sidebar-content:hover::-webkit-scrollbar-thumb:hover {
+            background: rgba(0,0,0,0.5);
+        }
+        
+        .sidebar-chapter {
+            display: block;
+            padding: 8px 0;
+            color: #aaa;
+            text-decoration: none;
+            font-size: 13px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s ease;
+            line-height: 1.5;
+        }
+        
+        .sidebar-chapter:hover {
+            color: #667eea;
+        }
+        
+        .sidebar-chapter.current {
+            color: #667eea;
+            font-weight: 600;
+        }
+        
+        @media (max-width: 1200px) {
+            .sidebar {
+                display: none;
+            }
+        }
+        
+        @media (max-width: 600px) {
+            .chapter-title {
+                font-size: 24px;
+            }
+            
+            .chapter-content {
+                font-size: 16px;
+            }
+            
+            .fixed-nav-content {
+                gap: 8px;
+            }
+            
+            .nav-btn {
+                padding: 10px 12px;
+                font-size: 12px;
+            }
+            
+            .scroll-buttons {
+                display: none;
+            }
+            
+            .tts-panel {
+                padding: 20px;
+                width: 95%;
+            }
+            
+            .tts-btn {
+                width: 48px;
+                height: 48px;
+                font-size: 18px;
+            }
+            
+            .tts-title {
+                font-size: 16px;
+            }
+        }
+        
+        /* 滚动条样式 */
+        .sidebar::-webkit-scrollbar {
+            width: 4px;
+        }
+        
+        .sidebar::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        
+        .sidebar::-webkit-scrollbar-thumb {
+            background: rgba(255,255,255,0.2);
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="top-nav">
+        <div class="top-nav-content">
+            <a href="../index.html" class="nav-link">返回首页</a>
+            <button class="nav-link" id="themeToggle">切换主题</button>
+        </div>
+    </nav>
+
+    <div class="container">
+        <header class="chapter-header">
+            <div class="chapter-number">{{CHAPTER_NUMBER}}</div>
+            <h1 class="chapter-title">{{CHAPTER_TITLE}}</h1>
+        </header>
+        
+        <article class="chapter-content">
+{{CHAPTER_CONTENT}}
+        </article>
+    </div>
+    
+    <!-- 固定底部导航 -->
+    <nav class="fixed-nav">
+        <div class="fixed-nav-content">
+            <a href="{{PREV_CHAPTER}}" class="nav-btn {{PREV_DISABLED}}">上一章</a>
+            <a href="../chapters.html" class="nav-btn">目录</a>
+            <button class="nav-btn" id="ttsToggleBtn">朗读</button>
+            <a href="{{NEXT_CHAPTER}}" class="nav-btn {{NEXT_DISABLED}}">下一章</a>
+        </div>
+    </nav>
+    
+    <!-- 右侧滚动按钮 -->
+    <div class="scroll-buttons">
+        <button class="scroll-btn" id="scrollTop" title="回到顶部">顶</button>
+        <button class="scroll-btn" id="scrollBottom" title="回到底部">底</button>
+    </div>
+    
+    <!-- TTS弹出面板 -->
+    <div class="tts-overlay" id="ttsOverlay">
+        <div class="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">🔊 语音朗读</div>
+                <button class="tts-close" id="ttsClose">×</button>
+            </div>
+            <div class="tts-controls">
+                <button class="tts-btn" id="ttsPlay" title="播放">▶</button>
+                <button class="tts-btn" id="ttsPause" title="暂停">⏸</button>
+                <button class="tts-btn" id="ttsStop" title="停止">⏹</button>
+            </div>
+            <div class="tts-progress">
+                <div class="tts-progress-bar">
+                    <div class="tts-progress-fill" id="ttsProgressFill"></div>
+                </div>
+                <div class="tts-time" id="ttsTime">0 / 0 句</div>
+            </div>
+            <div class="tts-speed">
+                <span class="tts-speed-label">朗读速度：</span>
+                <select class="tts-speed-select" id="ttsSpeed">
+                    <option value="0.5">慢速 (0.5x)</option>
+                    <option value="0.75">较慢 (0.75x)</option>
+                    <option value="1" selected>正常 (1x)</option>
+                    <option value="1.25">较快 (1.25x)</option>
+                    <option value="1.5">快速 (1.5x)</option>
+                    <option value="2">极速 (2x)</option>
+                </select>
+            </div>
+        </div>
+    </div>
+    
+    <!-- 侧边栏章节导航 -->
+    <aside class="sidebar">
+        <div class="sidebar-title">章节导航</div>
+        <div class="sidebar-content" id="sidebarContent">
+{{SIDEBAR_CHAPTERS}}
+        </div>
+    </aside>
+
+    <script>
+        // 记录阅读进度
+        let readChapters = JSON.parse(localStorage.getItem('readChapters') || '[]');
+        if (!readChapters.includes({{CHAPTER_ID}})) {
+            readChapters.push({{CHAPTER_ID}});
+            localStorage.setItem('readChapters', JSON.stringify(readChapters));
+        }
+        
+        // 主题切换
+        const themeToggle = document.getElementById('themeToggle');
+        const savedTheme = localStorage.getItem('theme') || 'dark';
+        document.documentElement.setAttribute('data-theme', savedTheme);
+        themeToggle.textContent = savedTheme === 'dark' ? '浅色' : '深色';
+        
+        themeToggle.addEventListener('click', () => {
+            const currentTheme = document.documentElement.getAttribute('data-theme');
+            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', newTheme);
+            localStorage.setItem('theme', newTheme);
+            themeToggle.textContent = newTheme === 'dark' ? '浅色' : '深色';
+        });
+        
+        // 滚动到顶部
+        document.getElementById('scrollTop').addEventListener('click', () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
+        
+        // 滚动到底部
+        document.getElementById('scrollBottom').addEventListener('click', () => {
+            window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+        });
+        
+        // 页面加载时，侧边栏自动滚动到当前章节
+        window.addEventListener('load', () => {
+            const sidebarContent = document.getElementById('sidebarContent');
+            const currentChapter = sidebarContent.querySelector('.current');
+            if (currentChapter) {
+                currentChapter.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            }
+        });
+        
+        // ========== TTS弹出面板 ==========
+        const ttsOverlay = document.getElementById('ttsOverlay');
+        const ttsToggleBtn = document.getElementById('ttsToggleBtn');
+        const ttsClose = document.getElementById('ttsClose');
+        
+        // 打开TTS面板
+        ttsToggleBtn.addEventListener('click', () => {
+            ttsOverlay.classList.add('show');
+            initTTS();
+        });
+        
+        // 关闭TTS面板
+        ttsClose.addEventListener('click', () => {
+            ttsOverlay.classList.remove('show');
+        });
+        
+        // 点击遮罩关闭
+        ttsOverlay.addEventListener('click', (e) => {
+            if (e.target === ttsOverlay) {
+                ttsOverlay.classList.remove('show');
+            }
+        });
+        
+        // ========== TTS语音朗读功能 ==========
+        let ttsSynth = window.speechSynthesis;
+        let ttsUtterance = null;
+        let ttsText = '';
+        let ttsSentences = [];
+        let ttsCurrentIndex = 0;
+        let ttsIsPlaying = false;
+        let ttsIsPaused = false;
+        let ttsSpeed = 1;
+        
+        // 初始化：提取章节内容
+        function initTTS() {
+            const contentEl = document.querySelector('.chapter-content');
+            if (!contentEl) return;
+            
+            // 获取所有段落文本，清理HTML标签
+            ttsText = contentEl.innerText || contentEl.textContent;
+            // 分割成句子（中文按句号、问号、感叹号分割）
+            ttsSentences = ttsText.match(/[^。！？\n]+[。！？\n]+|[^。！？\n]+$/g) || [ttsText];
+            ttsSentences = ttsSentences.filter(s => s.trim().length > 0);
+            
+            updateTTSProgress();
+        }
+        
+        // 更新进度显示
+        function updateTTSProgress() {
+            const total = ttsSentences.length;
+            const current = ttsCurrentIndex;
+            document.getElementById('ttsTime').textContent = `${current} / ${total} 句`;
+            const percent = total > 0 ? (current / total * 100) : 0;
+            document.getElementById('ttsProgressFill').style.width = `${percent}%`;
+        }
+        
+        // 播放当前句子
+        function playCurrentSentence() {
+            if (ttsCurrentIndex >= ttsSentences.length) {
+                stopTTS();
+                return;
+            }
+            
+            const text = ttsSentences[ttsCurrentIndex].trim();
+            ttsUtterance = new SpeechSynthesisUtterance(text);
+            ttsUtterance.lang = 'zh-CN';
+            ttsUtterance.rate = ttsSpeed;
+            
+            // 尝试选择中文语音
+            const voices = ttsSynth.getVoices();
+            const zhVoice = voices.find(v => v.lang.includes('zh') || v.lang.includes('CN'));
+            if (zhVoice) {
+                ttsUtterance.voice = zhVoice;
+            }
+            
+            ttsUtterance.onend = () => {
+                if (ttsIsPlaying && !ttsIsPaused) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsUtterance.onerror = (e) => {
+                console.error('TTS error:', e);
+                if (ttsIsPlaying) {
+                    ttsCurrentIndex++;
+                    updateTTSProgress();
+                    playCurrentSentence();
+                }
+            };
+            
+            ttsSynth.speak(ttsUtterance);
+        }
+        
+        // 播放
+        function playTTS() {
+            if (ttsSentences.length === 0) {
+                initTTS();
+            }
+            
+            if (ttsIsPaused) {
+                ttsSynth.resume();
+                ttsIsPaused = false;
+            } else {
+                ttsIsPlaying = true;
+                playCurrentSentence();
+            }
+            
+            document.getElementById('ttsPlay').classList.add('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.add('active');
+        }
+        
+        // 暂停
+        function pauseTTS() {
+            if (ttsIsPlaying) {
+                ttsSynth.pause();
+                ttsIsPaused = true;
+                document.getElementById('ttsPlay').classList.remove('active');
+                document.getElementById('ttsPause').classList.add('active');
+                ttsToggleBtn.classList.remove('active');
+            }
+        }
+        
+        // 停止
+        function stopTTS() {
+            ttsSynth.cancel();
+            ttsIsPlaying = false;
+            ttsIsPaused = false;
+            ttsCurrentIndex = 0;
+            updateTTSProgress();
+            document.getElementById('ttsPlay').classList.remove('active');
+            document.getElementById('ttsPause').classList.remove('active');
+            ttsToggleBtn.classList.remove('active');
+        }
+        
+        // 设置速度
+        function setTTSSpeed(speed) {
+            ttsSpeed = parseFloat(speed);
+            // 如果正在播放，需要重新开始当前句子
+            if (ttsIsPlaying && !ttsIsPaused) {
+                ttsSynth.cancel();
+                playCurrentSentence();
+            }
+        }
+        
+        // 绑定事件
+        document.getElementById('ttsPlay').addEventListener('click', playTTS);
+        document.getElementById('ttsPause').addEventListener('click', pauseTTS);
+        document.getElementById('ttsStop').addEventListener('click', stopTTS);
+        document.getElementById('ttsSpeed').addEventListener('change', (e) => setTTSSpeed(e.target.value));
+        
+        // 加载语音列表（某些浏览器需要异步加载）
+        if (speechSynthesis.onvoiceschanged !== undefined) {
+            speechSynthesis.onvoiceschanged = initTTS;
+        }
+        
+        // 页面离开时停止播放
+        window.addEventListener('beforeunload', stopTTS);
+    </script>
+</body>
 </html>
\ No newline at end of file
